<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-2790250778564958355</id><updated>2026-09-19T04:33:48.318-07:00</updated><category term="Çalışma"/><category term="Video"/><category term="Sözlük ve Terminoloji"/><category term="Terimler"/><category term="Online Kurs"/><category term="Kanun"/><category term="Kitap"/><category term="Listening"/><category term="Writing"/><category term="Makale"/><title type='text'>HUKUK İNGİLİZCESİ</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default?start-index=26&amp;max-results=25&amp;redirect=false'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>171</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1879342738896224173</id><published>2026-01-19T03:13:00.000-08:00</published><updated>2026-01-19T03:25:56.493-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>WORKPLACE – İŞYERİ</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Workplace (İşyeri) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f8fafc; } /* Slate-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-slate-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-building-user text-2xl mr-3 text-slate-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Workplace English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;İşyeri İngilizcesi&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-slate-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-slate-400 hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-slate-300 border-b-4 border-transparent hover:text-white hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-slate-300 border-b-4 border-transparent hover:text-white hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-slate-300 border-b-4 border-transparent hover:text-white hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Workplace (İşyeri) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-slate-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-slate-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-slate-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-slate-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-slate-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-slate-600 text-white px-4 py-2 rounded hover:bg-slate-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-cyan-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-cyan-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-slate-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-slate-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-slate-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-slate-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-slate-800 text-slate-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Workplace English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (WORKPLACE) ---
        const terms = [
            { id: 1, en: &quot;Security&quot;, tr: &quot;Emniyet / Güvenlik&quot;, pron: &quot;sekuriti&quot;, desc: &quot;The state of being free from danger or threat.&quot;, sample: &quot;Workplace security is a top priority.&quot;, sampleTr: &quot;İşyeri emniyeti en önemli önceliktir.&quot; },
            { id: 2, en: &quot;Honor&quot;, tr: &quot;Değer vermek / Onurlandırmak&quot;, pron: &quot;anır&quot;, desc: &quot;Regard with great respect; fulfill (an obligation).&quot;, sample: &quot;We honor our employees&#39; contributions.&quot;, sampleTr: &quot;Çalışanlarımızın katkılarına değer veririz.&quot; },
            { id: 3, en: &quot;Privacy&quot;, tr: &quot;Kişisel gizlilik&quot;, pron: &quot;prayvısi&quot;, desc: &quot;The state or condition of being free from being observed or disturbed by other people.&quot;, sample: &quot;Respecting employee privacy is essential.&quot;, sampleTr: &quot;Çalışanların kişisel gizliliğine saygı duymak esastır.&quot; },
            { id: 4, en: &quot;Feedback&quot;, tr: &quot;Geribildirim&quot;, pron: &quot;fiidbeek&quot;, desc: &quot;Information about reactions to a product, a person&#39;s performance of a task, etc.&quot;, sample: &quot;Constructive feedback helps us improve.&quot;, sampleTr: &quot;Yapıcı geribildirim gelişmemize yardımcı olur.&quot; },
            { id: 5, en: &quot;Enable&quot;, tr: &quot;Olanak tanımak / Sağlamak&quot;, pron: &quot;ineybıl&quot;, desc: &quot;Give (someone or something) the authority or means to do something.&quot;, sample: &quot;New tools enable remote work.&quot;, sampleTr: &quot;Yeni araçlar uzaktan çalışmaya olanak tanır.&quot; },
            { id: 6, en: &quot;Refuse&quot;, tr: &quot;Kabul etmemek / Reddetmek&quot;, pron: &quot;refuus&quot;, desc: &quot;Indicate or show that one is not willing to do something.&quot;, sample: &quot;You can refuse unsafe work assignments.&quot;, sampleTr: &quot;Güvensiz iş görevlerini kabul etmeyebilirsiniz.&quot; },
            { id: 7, en: &quot;Harass&quot;, tr: &quot;Rahatsız etmek / Taciz etmek&quot;, pron: &quot;haras&quot;, desc: &quot;Subject to aggressive pressure or intimidation.&quot;, sample: &quot;It is illegal to harass colleagues.&quot;, sampleTr: &quot;İş arkadaşlarını rahatsız etmek (taciz etmek) yasa dışıdır.&quot; },
            { id: 8, en: &quot;Prohibit&quot;, tr: &quot;Engel olmak / Yasaklamak&quot;, pron: &quot;prohibit&quot;, desc: &quot;Formally forbid (something) by law, rule, or other authority.&quot;, sample: &quot;Company rules prohibit smoking indoors.&quot;, sampleTr: &quot;Şirket kuralları içeride sigara içilmesine engel olur (yasaklar).&quot; },
            { id: 9, en: &quot;Acquiesce&quot;, tr: &quot;Razı olmak / Sessizce kabul etmek&quot;, pron: &quot;ekkuayse&quot;, desc: &quot;Accept something reluctantly but without protest.&quot;, sample: &quot;He seemed to acquiesce to the new policy.&quot;, sampleTr: &quot;Yeni politikaya razı olmuş (sessizce kabul etmiş) gibi görünüyordu.&quot; },
            { id: 10, en: &quot;Expectation&quot;, tr: &quot;Beklenti&quot;, pron: &quot;ekspekteyşın&quot;, desc: &quot;A strong belief that something will happen or be the case in the future.&quot;, sample: &quot;Clear expectation reduces confusion.&quot;, sampleTr: &quot;Net beklenti kafa karışıklığını azaltır.&quot; },
            { id: 11, en: &quot;Protocol&quot;, tr: &quot;Doğru ve standart prosedür / Protokol&quot;, pron: &quot;protokol&quot;, desc: &quot;The official procedure or system of rules governing affairs.&quot;, sample: &quot;Follow the safety protocol at all times.&quot;, sampleTr: &quot;Her zaman güvenlik protokolünü (standart prosedürü) izleyin.&quot; },
            { id: 12, en: &quot;Grievance&quot;, tr: &quot;İşçinin yaptığı şikayet / Yakınma&quot;, pron: &quot;griivıns&quot;, desc: &quot;A real or imagined wrong or other cause for complaint or protest, especially unfair treatment.&quot;, sample: &quot;She filed a grievance with the union.&quot;, sampleTr: &quot;Sendikaya bir şikayet (yakınma) dilekçesi verdi.&quot; },
            { id: 13, en: &quot;Progressive&quot;, tr: &quot;Aşamalı / İlerleyen&quot;, pron: &quot;progresiv&quot;, desc: &quot;Happening or developing gradually or in stages.&quot;, sample: &quot;We use a progressive discipline system.&quot;, sampleTr: &quot;Aşamalı bir disiplin sistemi kullanıyoruz.&quot; },
            { id: 14, en: &quot;Impartial&quot;, tr: &quot;Tarafsız&quot;, pron: &quot;imparçıl&quot;, desc: &quot;Treating all rivals or disputants equally; fair and just.&quot;, sample: &quot;The investigation must be impartial.&quot;, sampleTr: &quot;Soruşturma tarafsız olmalıdır.&quot; },
            { id: 15, en: &quot;Guidelines&quot;, tr: &quot;Kılavuz / Yönergeler&quot;, pron: &quot;gaydlayns&quot;, desc: &quot;A general rule, principle, or piece of advice.&quot;, sample: &quot;Please read the ethical guidelines carefully.&quot;, sampleTr: &quot;Lütfen etik kılavuzunu (yönergeleri) dikkatlice okuyun.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-slate-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-slate-300&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-slate-300&#39;);
            activeBtn.classList.add(&#39;border-slate-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-slate-100 text-slate-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-slate-700 text-white px-4 py-2 rounded-full hover:bg-slate-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-slate-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-slate-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-slate-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-slate-600 hover:text-slate-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-slate-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-slate-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-slate-600 hover:text-slate-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-slate-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-slate-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-slate-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-slate-800&#39;, &#39;border&#39;, &#39;border-slate-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-slate-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-slate-800&#39;, &#39;border&#39;, &#39;border-slate-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-slate-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-slate-800&#39;, &#39;border&#39;, &#39;border-slate-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-slate-100 text-slate-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-slate-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-slate-600 focus:ring-slate-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1879342738896224173/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/workplace-syer.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1879342738896224173'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1879342738896224173'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/workplace-syer.html' title='WORKPLACE – İŞYERİ'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1776876100159097499</id><published>2026-01-19T03:01:00.000-08:00</published><updated>2026-01-19T03:02:19.823-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>WILLS – VASİYETNAMELER</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Wills (Vasiyetnameler) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f0fdfa; } /* Teal-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-teal-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-scroll text-2xl mr-3 text-teal-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Wills English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Vasiyetnameler Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-teal-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-teal-400 hover:bg-teal-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-teal-200 border-b-4 border-transparent hover:text-white hover:bg-teal-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-teal-200 border-b-4 border-transparent hover:text-white hover:bg-teal-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-teal-200 border-b-4 border-transparent hover:text-white hover:bg-teal-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Wills (Vasiyetnameler) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-teal-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-teal-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-teal-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-teal-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-teal-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-teal-600 text-white px-4 py-2 rounded hover:bg-teal-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-teal-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-teal-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-teal-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-teal-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-teal-800 text-teal-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Wills English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (WILLS) ---
        const terms = [
            { id: 1, en: &quot;Intestate&quot;, tr: &quot;Vasiyetname bırakmadan ölen kişi&quot;, pron: &quot;intesteyt&quot;, desc: &quot;Dying without having made a will.&quot;, sample: &quot;The property was divided because he died intestate.&quot;, sampleTr: &quot;Vasiyetname bırakmadan öldüğü için mülk bölündü.&quot; },
            { id: 2, en: &quot;Beneficiary&quot;, tr: &quot;Mülk sahibi / Lehdar&quot;, pron: &quot;benefişıri&quot;, desc: &quot;A person who derives advantage from something, especially a trust, will, or life insurance policy.&quot;, sample: &quot;She is the sole beneficiary of his will.&quot;, sampleTr: &quot;Vasiyetnamesinin tek lehdarı (faydalanıcısı) odur.&quot; },
            { id: 3, en: &quot;Executor&quot;, tr: &quot;Vasiyeti yerine getiren kişi&quot;, pron: &quot;ekzekuutır&quot;, desc: &quot;A person appointed by a testator to carry out the terms of their will.&quot;, sample: &quot;The executor distributed the assets to the heirs.&quot;, sampleTr: &quot;Vasiyeti yerine getiren kişi varlıkları mirasçılara dağıttı.&quot; },
            { id: 4, en: &quot;Probate&quot;, tr: &quot;Vasiyetnameyi resmen onaylama&quot;, pron: &quot;probeyt&quot;, desc: &quot;The official proving of a will.&quot;, sample: &quot;The will is currently in probate.&quot;, sampleTr: &quot;Vasiyetname şu anda resmi onay sürecinde.&quot; },
            { id: 5, en: &quot;Representative&quot;, tr: &quot;Temsilci&quot;, pron: &quot;reprezentatif&quot;, desc: &quot;A person chosen or appointed to act or speak for another or others.&quot;, sample: &quot;The legal representative handled the estate.&quot;, sampleTr: &quot;Yasal temsilci mülkü idare etti.&quot; },
            { id: 6, en: &quot;Guardian&quot;, tr: &quot;Vasi / Koruyucu&quot;, pron: &quot;gardiyın&quot;, desc: &quot;A defender, protector, or keeper.&quot;, sample: &quot;A guardian was appointed for the minor children.&quot;, sampleTr: &quot;Reşit olmayan çocuklar için bir vasi atandı.&quot; },
            { id: 7, en: &quot;Valid&quot;, tr: &quot;Geçerli&quot;, pron: &quot;valid&quot;, desc: &quot;Legally binding due to having been executed in compliance with the law.&quot;, sample: &quot;The will was declared valid by the court.&quot;, sampleTr: &quot;Vasiyetname mahkeme tarafından geçerli ilan edildi.&quot; },
            { id: 8, en: &quot;Inherit&quot;, tr: &quot;Miras almak&quot;, pron: &quot;inherit&quot;, desc: &quot;Receive (money, property, or a title) as an heir at the death of the previous holder.&quot;, sample: &quot;She will inherit the family business.&quot;, sampleTr: &quot;Aile şirketini miras alacak.&quot; },
            { id: 9, en: &quot;Distribute&quot;, tr: &quot;Dağıtmak&quot;, pron: &quot;distribuut&quot;, desc: &quot;Give shares of something; deal out.&quot;, sample: &quot;Assets were distributed among the siblings.&quot;, sampleTr: &quot;Varlıklar kardeşler arasında dağıtıldı.&quot; },
            { id: 10, en: &quot;Heirs&quot;, tr: &quot;Mirasçı&quot;, pron: &quot;hayırs&quot;, desc: &quot;A person legally entitled to the property or rank of another on that person&#39;s death.&quot;, sample: &quot;The heirs gathered for the reading of the will.&quot;, sampleTr: &quot;Mirasçılar vasiyetnamenin okunması için toplandılar.&quot; },
            { id: 11, en: &quot;Assets&quot;, tr: &quot;Varlıklar&quot;, pron: &quot;asets&quot;, desc: &quot;Property owned by a person or company, regarded as having value.&quot;, sample: &quot;All assets must be listed for probate.&quot;, sampleTr: &quot;Tüm varlıklar resmi onay için listelenmelidir.&quot; },
            { id: 12, en: &quot;Initiate&quot;, tr: &quot;Başlamak&quot;, pron: &quot;initiate&quot;, desc: &quot;Cause (a process or action) to begin.&quot;, sample: &quot;We must initiate the probate process.&quot;, sampleTr: &quot;Onaylama sürecini başlatmalıyız.&quot; },
            { id: 13, en: &quot;Appoint&quot;, tr: &quot;Atamak&quot;, pron: &quot;eppoyint&quot;, desc: &quot;Assign a job or role to (someone).&quot;, sample: &quot;The will appoints his brother as executor.&quot;, sampleTr: &quot;Vasiyetname kardeşini uygulayıcı olarak atar.&quot; },
            { id: 14, en: &quot;Administrator&quot;, tr: &quot;Mirası idare eden&quot;, pron: &quot;edministreytır&quot;, desc: &quot;A person appointed by a court to manage the estate of a deceased person who left no will.&quot;, sample: &quot;The court named an administrator for the estate.&quot;, sampleTr: &quot;Mahkeme mülk için bir idareci atadı.&quot; },
            { id: 15, en: &quot;Coerce&quot;, tr: &quot;Mecbur etmek / Zorlamak&quot;, pron: &quot;koers&quot;, desc: &quot;Persuade (an unwilling person) to do something by using force or threats.&quot;, sample: &quot;He was coerced into signing the will.&quot;, sampleTr: &quot;Vasiyetnameyi imzalamaya mecbur edildi.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-teal-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-teal-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-teal-200&#39;);
            activeBtn.classList.add(&#39;border-teal-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-teal-100 text-teal-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-teal-700 text-white px-4 py-2 rounded-full hover:bg-teal-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-teal-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-teal-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-teal-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-teal-600 hover:text-teal-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-teal-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-teal-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-teal-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-teal-600 hover:text-teal-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-teal-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-teal-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-teal-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-teal-800&#39;, &#39;border&#39;, &#39;border-teal-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-teal-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-teal-800&#39;, &#39;border&#39;, &#39;border-teal-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-teal-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-teal-800&#39;, &#39;border&#39;, &#39;border-teal-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-teal-100 text-teal-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-teal-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-teal-600 focus:ring-teal-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1776876100159097499/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/wills-vasiyetnameler.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1776876100159097499'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1776876100159097499'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/wills-vasiyetnameler.html' title='WILLS – VASİYETNAMELER'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-8660767320753542703</id><published>2026-01-19T02:58:00.000-08:00</published><updated>2026-01-19T03:02:19.823-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>WARRANTIES – TEMİNATLAR</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Warranties (Teminatlar) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #eef2ff; } /* Indigo-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-indigo-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-shield-halved text-2xl mr-3 text-indigo-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Warranties English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Teminatlar Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-indigo-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-indigo-400 hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-indigo-200 border-b-4 border-transparent hover:text-white hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-indigo-200 border-b-4 border-transparent hover:text-white hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-indigo-200 border-b-4 border-transparent hover:text-white hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Warranties (Teminatlar) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-indigo-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-indigo-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-indigo-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-indigo-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-indigo-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-indigo-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-indigo-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-indigo-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-indigo-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-indigo-800 text-indigo-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Warranties English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (WARRANTIES) ---
        const terms = [
            { id: 1, en: &quot;Amount&quot;, tr: &quot;Miktar&quot;, pron: &quot;emaont&quot;, desc: &quot;A quantity of something, especially the total of a thing or things in number, size, value, or extent.&quot;, sample: &quot;The warranty covers the full amount of repairs.&quot;, sampleTr: &quot;Garanti, onarımların tam miktarını kapsar.&quot; },
            { id: 2, en: &quot;Compare&quot;, tr: &quot;Kıyaslamak&quot;, pron: &quot;kompeyr&quot;, desc: &quot;Estimate, measure, or note the similarity or dissimilarity between.&quot;, sample: &quot;You should compare different warranty plans.&quot;, sampleTr: &quot;Farklı garanti planlarını kıyaslamalısınız.&quot; },
            { id: 3, en: &quot;Characteristic&quot;, tr: &quot;Ayırt edici özellik&quot;, pron: &quot;karakteristik&quot;, desc: &quot;A feature or quality belonging typically to a person, place, or thing and serving to identify it.&quot;, sample: &quot;Durability is a key characteristic of this product.&quot;, sampleTr: &quot;Dayanıklılık bu ürünün temel ayırt edici özelliğidir.&quot; },
            { id: 4, en: &quot;Available&quot;, tr: &quot;Erişilebilir / Mevcut&quot;, pron: &quot;eveylibıl&quot;, desc: &quot;Able to be used or obtained; at someone&#39;s disposal.&quot;, sample: &quot;Is an extended warranty available?&quot;, sampleTr: &quot;Uzatılmış garanti erişilebilir (mevcut) mi?&quot; },
            { id: 5, en: &quot;Expire&quot;, tr: &quot;Tükenmek / Süresi dolmak&quot;, pron: &quot;ekspayr&quot;, desc: &quot;(Of a document, authorization, or agreement) cease to be valid, typically after a fixed period of time.&quot;, sample: &quot;The warranty will expire next month.&quot;, sampleTr: &quot;Garantinin süresi gelecek ay dolacak (tükenecek).&quot; },
            { id: 6, en: &quot;Exclude&quot;, tr: &quot;Hariç tutmak&quot;, pron: &quot;ekskluud&quot;, desc: &quot;Deny (someone) access to or bar (someone) from a place, group, or privilege.&quot;, sample: &quot;Some warranties exclude water damage.&quot;, sampleTr: &quot;Bazı garantiler su hasarını hariç tutar.&quot; },
            { id: 7, en: &quot;Damage&quot;, tr: &quot;Hasar&quot;, pron: &quot;demıc&quot;, desc: &quot;Physical harm caused to something in such a way as to impair its value, usefulness, or normal function.&quot;, sample: &quot;The warranty covers accidental damage.&quot;, sampleTr: &quot;Garanti kazara oluşan hasarı kapsar.&quot; },
            { id: 8, en: &quot;Manner&quot;, tr: &quot;Tavır / Tarz / Biçim&quot;, pron: &quot;menır&quot;, desc: &quot;A way in which a thing is done or happens.&quot;, sample: &quot;The defect must be reported in a timely manner.&quot;, sampleTr: &quot;Kusur zamanında bir biçimde (tavırda) bildirilmelidir.&quot; },
            { id: 9, en: &quot;Major&quot;, tr: &quot;Temel / Büyük&quot;, pron: &quot;meycır&quot;, desc: &quot;Important, serious, or significant.&quot;, sample: &quot;The warranty covers major defects.&quot;, sampleTr: &quot;Garanti temel (büyük) kusurları kapsar.&quot; },
            { id: 10, en: &quot;Warranty&quot;, tr: &quot;Teminat / Garanti&quot;, pron: &quot;verınti&quot;, desc: &quot;A written guarantee, issued to the purchaser of an article by its manufacturer, promising to repair or replace it if necessary within a specified period of time.&quot;, sample: &quot;The car comes with a 3-year warranty.&quot;, sampleTr: &quot;Araba 3 yıllık bir teminatla (garantiyle) gelir.&quot; },
            { id: 11, en: &quot;Investigate&quot;, tr: &quot;İncelemek / Soruşturmak&quot;, pron: &quot;investigeyt&quot;, desc: &quot;Carry out a systematic or formal inquiry to discover and examine the facts of (an incident, allegation, etc.) so as to establish the truth.&quot;, sample: &quot;They will investigate the cause of the failure.&quot;, sampleTr: &quot;Arızanın nedenini inceleyecekler.&quot; },
            { id: 12, en: &quot;Precaution&quot;, tr: &quot;Tedbir / Önlem&quot;, pron: &quot;prekauşın&quot;, desc: &quot;A measure taken in advance to prevent something dangerous, unpleasant, or inconvenient from happening.&quot;, sample: &quot;Take every precaution to avoid damage.&quot;, sampleTr: &quot;Hasardan kaçınmak için her türlü tedbiri alın.&quot; },
            { id: 13, en: &quot;Reputation&quot;, tr: &quot;İtibar&quot;, pron: &quot;reputeyşın&quot;, desc: &quot;The beliefs or opinions that are generally held about someone or something.&quot;, sample: &quot;The company has a reputation for quality.&quot;, sampleTr: &quot;Şirketin kalite konusunda bir itibarı vardır.&quot; },
            { id: 14, en: &quot;Abuse&quot;, tr: &quot;Kötüye kullanmak / Suistimal&quot;, pron: &quot;abüüs&quot;, desc: &quot;Use (something) to bad effect or for a bad purpose; misuse.&quot;, sample: &quot;The warranty is void if there is evidence of abuse.&quot;, sampleTr: &quot;Kötüye kullanma (suistimal) kanıtı varsa garanti geçersizdir.&quot; },
            { id: 15, en: &quot;Cancel&quot;, tr: &quot;İptal etmek&quot;, pron: &quot;kensıl&quot;, desc: &quot;Decide or announce that (an arranged or planned event) will not take place.&quot;, sample: &quot;You can cancel the warranty within 30 days.&quot;, sampleTr: &quot;Garantiyi 30 gün içinde iptal edebilirsiniz.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-indigo-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-indigo-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-indigo-200&#39;);
            activeBtn.classList.add(&#39;border-indigo-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-indigo-700 text-white px-4 py-2 rounded-full hover:bg-indigo-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-indigo-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-indigo-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-indigo-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-indigo-600 hover:text-indigo-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-indigo-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-indigo-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-indigo-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-indigo-600 hover:text-indigo-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-indigo-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-indigo-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-indigo-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-indigo-800&#39;, &#39;border&#39;, &#39;border-indigo-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-indigo-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-indigo-800&#39;, &#39;border&#39;, &#39;border-indigo-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-indigo-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-indigo-800&#39;, &#39;border&#39;, &#39;border-indigo-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-indigo-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-indigo-600 focus:ring-indigo-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/8660767320753542703/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/warranties-teminatlar.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8660767320753542703'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8660767320753542703'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/warranties-teminatlar.html' title='WARRANTIES – TEMİNATLAR'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-5569507538888947865</id><published>2026-01-19T02:55:00.000-08:00</published><updated>2026-01-19T03:02:19.823-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>TRAFFIC – TRAFİK</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Traffic (Trafik) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fff7ed; } /* Orange-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-orange-700 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-traffic-light text-2xl mr-3 text-orange-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Traffic English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Trafik Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-orange-800&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-orange-400 hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-orange-200 border-b-4 border-transparent hover:text-white hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-orange-200 border-b-4 border-transparent hover:text-white hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-orange-200 border-b-4 border-transparent hover:text-white hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Traffic (Trafik) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-orange-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-orange-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-orange-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-orange-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-orange-800 text-orange-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Traffic English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (TRAFFIC) ---
        const terms = [
            { id: 1, en: &quot;Track&quot;, tr: &quot;İzlemek&quot;, pron: &quot;trek&quot;, desc: &quot;To follow the course or trail of someone or something.&quot;, sample: &quot;Police track speeding cars with radar.&quot;, sampleTr: &quot;Polis hız yapan arabaları radarla izler.&quot; },
            { id: 2, en: &quot;Severity&quot;, tr: &quot;Önem / Şiddet&quot;, pron: &quot;siviriti&quot;, desc: &quot;The fact or condition of being severe.&quot;, sample: &quot;The severity of the accident was high.&quot;, sampleTr: &quot;Kazanın önemi (şiddeti) yüksekti.&quot; },
            { id: 3, en: &quot;Contest&quot;, tr: &quot;Çekişmek / İtiraz etmek&quot;, pron: &quot;kontest&quot;, desc: &quot;Oppose (an action, decision, or theory) as mistaken or wrong.&quot;, sample: &quot;You can contest the ticket in court.&quot;, sampleTr: &quot;Mahkemede cezaya itiraz edebilirsiniz (çekişebilirsiniz).&quot; },
            { id: 4, en: &quot;Fine&quot;, tr: &quot;Para cezasına çarptırmak / Para cezası&quot;, pron: &quot;fayn&quot;, desc: &quot;Punish (someone) by making them pay a sum of money.&quot;, sample: &quot;The judge fined him for speeding.&quot;, sampleTr: &quot;Yargıç onu hız yapmaktan para cezasına çarptırdı.&quot; },
            { id: 5, en: &quot;Citation&quot;, tr: &quot;Mahkeme celbi / Trafik cezası&quot;, pron: &quot;sayteyşın&quot;, desc: &quot;A summons to appear in court; an official report of a violation.&quot;, sample: &quot;The officer issued a citation for illegal parking.&quot;, sampleTr: &quot;Memur yasadışı park için bir mahkeme celbi (ceza makbuzu) verdi.&quot; },
            { id: 6, en: &quot;Absurd&quot;, tr: &quot;Saçma&quot;, pron: &quot;ebsörd&quot;, desc: &quot;Wildly unreasonable, illogical, or inappropriate.&quot;, sample: &quot;The speed limit here is absurd.&quot;, sampleTr: &quot;Buradaki hız sınırı saçma.&quot; },
            { id: 7, en: &quot;Suspend&quot;, tr: &quot;Askıya almak&quot;, pron: &quot;saspent&quot;, desc: &quot;Temporarily prevent from continuing or being in force or effect.&quot;, sample: &quot;They will suspend your license if you drink and drive.&quot;, sampleTr: &quot;Alkollü araç kullanırsanız ehliyetinizi askıya alacaklar.&quot; },
            { id: 8, en: &quot;Revoke&quot;, tr: &quot;İptal etmek&quot;, pron: &quot;rivok&quot;, desc: &quot;Put an end to the validity or operation of (a decree, decision, or promise).&quot;, sample: &quot;The court can revoke your driving privileges.&quot;, sampleTr: &quot;Mahkeme sürüş ayrıcalıklarınızı iptal edebilir.&quot; },
            { id: 9, en: &quot;Gather&quot;, tr: &quot;Toplamak&quot;, pron: &quot;gedır&quot;, desc: &quot;Bring together and take in from scattered places or sources.&quot;, sample: &quot;Police gather evidence at the scene.&quot;, sampleTr: &quot;Polis olay yerinde kanıt toplar.&quot; },
            { id: 10, en: &quot;Reliable&quot;, tr: &quot;Güvenilir&quot;, pron: &quot;rilayıbıl&quot;, desc: &quot;Consistently good in quality or performance; able to be trusted.&quot;, sample: &quot;Is the breathalyzer test reliable?&quot;, sampleTr: &quot;Alkolmetre testi güvenilir mi?&quot; },
            { id: 11, en: &quot;Appear&quot;, tr: &quot;Mahkeme huzuruna çıkmak&quot;, pron: &quot;eppiyır&quot;, desc: &quot;Present oneself formally, as in a court.&quot;, sample: &quot;You must appear in court on Monday.&quot;, sampleTr: &quot;Pazartesi günü mahkeme huzuruna çıkmalısınız.&quot; },
            { id: 12, en: &quot;Dismiss&quot;, tr: &quot;Davayı/Suçlamayı düşürmek&quot;, pron: &quot;dismis&quot;, desc: &quot;Order or allow to leave; treat as unworthy of serious consideration (in law: to refuse further hearing to a case).&quot;, sample: &quot;The judge decided to dismiss the charge.&quot;, sampleTr: &quot;Yargıç suçlamayı düşürmeye (davayı reddetmeye) karar verdi.&quot; },
            { id: 13, en: &quot;Charge&quot;, tr: &quot;Suçlamak&quot;, pron: &quot;çarc&quot;, desc: &quot;Accuse (someone) of an offense.&quot;, sample: &quot;Police charged him with reckless driving.&quot;, sampleTr: &quot;Polis onu dikkatsiz araç kullanmakla suçladı.&quot; },
            { id: 14, en: &quot;Influence&quot;, tr: &quot;Etkilemek&quot;, pron: &quot;influuns&quot;, desc: &quot;The capacity to have an effect on the character, development, or behavior of someone or something.&quot;, sample: &quot;Driving under the influence is a crime.&quot;, sampleTr: &quot;Etki altında (alkol/uyuşturucu) araç kullanmak bir suçtur.&quot; },
            { id: 15, en: &quot;Premium&quot;, tr: &quot;Bir şeye itibari değerinden fazla olarak verilen fiyat (Sigorta primi)&quot;, pron: &quot;premiyum&quot;, desc: &quot;An amount to be paid for an insurance policy.&quot;, sample: &quot;Insurance premiums rise after an accident.&quot;, sampleTr: &quot;Bir kazadan sonra sigorta primleri artar.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-orange-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-orange-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-orange-200&#39;);
            activeBtn.classList.add(&#39;border-orange-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-orange-100 text-orange-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-orange-700 text-white px-4 py-2 rounded-full hover:bg-orange-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-orange-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-orange-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-orange-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-orange-600 hover:text-orange-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-orange-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-orange-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-orange-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-orange-600 hover:text-orange-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-orange-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-orange-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-orange-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-orange-800&#39;, &#39;border&#39;, &#39;border-orange-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-orange-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-orange-800&#39;, &#39;border&#39;, &#39;border-orange-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-orange-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-orange-800&#39;, &#39;border&#39;, &#39;border-orange-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-orange-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-orange-600 focus:ring-orange-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/5569507538888947865/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/traffic-trafik.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5569507538888947865'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5569507538888947865'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/traffic-trafik.html' title='TRAFFIC – TRAFİK'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-150275662090195489</id><published>2026-01-19T02:47:00.000-08:00</published><updated>2026-01-19T02:48:09.074-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>TRADEMARKS – TİCARİ MARKALAR</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Trademarks (Ticari Markalar) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #eef2ff; } /* Indigo-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-indigo-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-registered text-2xl mr-3 text-indigo-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Trademarks English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Ticari Markalar&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-indigo-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-indigo-400 hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-indigo-200 border-b-4 border-transparent hover:text-white hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-indigo-200 border-b-4 border-transparent hover:text-white hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-indigo-200 border-b-4 border-transparent hover:text-white hover:bg-indigo-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Trademarks (Ticari Markalar) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-indigo-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-indigo-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-indigo-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-indigo-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-indigo-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-indigo-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-indigo-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-indigo-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-indigo-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-indigo-800 text-indigo-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Trademarks English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (TRADEMARKS) ---
        const terms = [
            { id: 1, en: &quot;Designate&quot;, tr: &quot;Belirtmek / Atamak&quot;, pron: &quot;designeyt&quot;, desc: &quot;To officially give a specified status or name to.&quot;, sample: &quot;We designate this symbol as our trademark.&quot;, sampleTr: &quot;Bu sembolü ticari markamız olarak belirtiyoruz.&quot; },
            { id: 2, en: &quot;Original&quot;, tr: &quot;Orijinal / Özgün&quot;, pron: &quot;oricinıl&quot;, desc: &quot;Created directly and personally by a particular artist; not a copy.&quot;, sample: &quot;The design must be original.&quot;, sampleTr: &quot;Tasarım orijinal (özgün) olmalıdır.&quot; },
            { id: 3, en: &quot;Acquire&quot;, tr: &quot;Sahip olmak / Edinmek&quot;, pron: &quot;ekkuayr&quot;, desc: &quot;Buy or obtain (an asset or object) for oneself.&quot;, sample: &quot;They hope to acquire the trademark rights.&quot;, sampleTr: &quot;Ticari marka haklarına sahip olmayı umuyorlar.&quot; },
            { id: 4, en: &quot;Use&quot;, tr: &quot;Kullanım&quot;, pron: &quot;yuus&quot;, desc: &quot;The action of using something or the state of being used.&quot;, sample: &quot;Unauthorized use is prohibited.&quot;, sampleTr: &quot;İzinsiz kullanım yasaktır.&quot; },
            { id: 5, en: &quot;Register&quot;, tr: &quot;Kaydolmak / Tescil ettirmek&quot;, pron: &quot;recıstır&quot;, desc: &quot;Enter or record on an official list or directory.&quot;, sample: &quot;You should register your brand name.&quot;, sampleTr: &quot;Marka adınızı kaydettirmelisiniz (tescil ettirmelisiniz).&quot; },
            { id: 6, en: &quot;Jeopardize&quot;, tr: &quot;Riske etmek / Tehlikeye atmak&quot;, pron: &quot;ceopardayz&quot;, desc: &quot;Put (someone or something) into a situation in which there is a danger of loss, harm, or failure.&quot;, sample: &quot;Poor quality can jeopardize the brand.&quot;, sampleTr: &quot;Kötü kalite markayı riske atabilir.&quot; },
            { id: 7, en: &quot;Commerce&quot;, tr: &quot;Ticaret&quot;, pron: &quot;komörs&quot;, desc: &quot;The activity of buying and selling, especially on a large scale.&quot;, sample: &quot;The trademark is used in commerce.&quot;, sampleTr: &quot;Ticari marka ticarette kullanılır.&quot; },
            { id: 8, en: &quot;License&quot;, tr: &quot;Lisans vermek&quot;, pron: &quot;laysıns&quot;, desc: &quot;Grant a license to (someone or something) to permit the use of something or to allow an activity to take place.&quot;, sample: &quot;We can license the logo to others.&quot;, sampleTr: &quot;Logoyu başkalarına lisanslayabiliriz (lisans verebiliriz).&quot; },
            { id: 9, en: &quot;Monitor&quot;, tr: &quot;İzlemek / Gözlemlemek&quot;, pron: &quot;monitor&quot;, desc: &quot;Observe and check the progress or quality of (something) over a period of time.&quot;, sample: &quot;Companies monitor the market for infringements.&quot;, sampleTr: &quot;Şirketler ihlaller için pazarı izler.&quot; },
            { id: 10, en: &quot;Bona fide&quot;, tr: &quot;İyi niyetle / Gerçek&quot;, pron: &quot;bona fayd&quot;, desc: &quot;Genuine; real. Undertaken in good faith.&quot;, sample: &quot;It was a bona fide attempt to sell.&quot;, sampleTr: &quot;Bu iyi niyetli bir satış girişimiydi.&quot; },
            { id: 11, en: &quot;Accompany&quot;, tr: &quot;Eşlik etmek&quot;, pron: &quot;ekkampani&quot;, desc: &quot;Go somewhere with (someone) as a companion or escort; be present or occur at the same time as.&quot;, sample: &quot;A logo often accompanies the name.&quot;, sampleTr: &quot;Bir logo genellikle isme eşlik eder.&quot; },
            { id: 12, en: &quot;Goodwill&quot;, tr: &quot;Bir ticaret yerinin manevi değerleri / İtibar&quot;, pron: &quot;gudvil&quot;, desc: &quot;The established reputation of a business regarded as a quantifiable asset.&quot;, sample: &quot;The trademark protects the company&#39;s goodwill.&quot;, sampleTr: &quot;Ticari marka şirketin manevi değerlerini (itibarını) korur.&quot; },
            { id: 13, en: &quot;Distinctive&quot;, tr: &quot;Ayırt eden / Kendine özgü&quot;, pron: &quot;distinktiv&quot;, desc: &quot;Characteristic of one person or thing, and so serving to distinguish it from others.&quot;, sample: &quot;A trademark must be distinctive.&quot;, sampleTr: &quot;Bir ticari marka ayırt edici (kendine özgü) olmalıdır.&quot; },
            { id: 14, en: &quot;Scope&quot;, tr: &quot;Kapsam&quot;, pron: &quot;skop&quot;, desc: &quot;The extent of the area or subject matter that something deals with or to which it is relevant.&quot;, sample: &quot;The scope of protection is limited.&quot;, sampleTr: &quot;Koruma kapsamı sınırlıdır.&quot; },
            { id: 15, en: &quot;Slogan&quot;, tr: &quot;Slogan&quot;, pron: &quot;slogın&quot;, desc: &quot;A short and striking or memorable phrase used in advertising.&quot;, sample: &quot;Their slogan is very catchy.&quot;, sampleTr: &quot;Sloganları çok akılda kalıcı.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-indigo-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-indigo-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-indigo-200&#39;);
            activeBtn.classList.add(&#39;border-indigo-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-indigo-100 text-indigo-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-indigo-700 text-white px-4 py-2 rounded-full hover:bg-indigo-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-indigo-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-indigo-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-indigo-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-indigo-600 hover:text-indigo-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-indigo-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-indigo-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-indigo-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-indigo-600 hover:text-indigo-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-indigo-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-indigo-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-indigo-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-indigo-800&#39;, &#39;border&#39;, &#39;border-indigo-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-indigo-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-indigo-800&#39;, &#39;border&#39;, &#39;border-indigo-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-indigo-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-indigo-800&#39;, &#39;border&#39;, &#39;border-indigo-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-indigo-100 text-indigo-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-indigo-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-indigo-600 focus:ring-indigo-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/150275662090195489/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/trademarks-ticari-markalar.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/150275662090195489'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/150275662090195489'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/trademarks-ticari-markalar.html' title='TRADEMARKS – TİCARİ MARKALAR'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-5880158015458222400</id><published>2026-01-19T02:45:00.000-08:00</published><updated>2026-01-19T02:48:09.074-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>TAXES – VERGİLER</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Taxes (Vergiler) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #ecfdf5; } /* Emerald-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-emerald-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-coins text-2xl mr-3 text-emerald-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Taxes English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Vergi Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-emerald-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-emerald-400 hover:bg-emerald-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-emerald-200 border-b-4 border-transparent hover:text-white hover:bg-emerald-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-emerald-200 border-b-4 border-transparent hover:text-white hover:bg-emerald-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-emerald-200 border-b-4 border-transparent hover:text-white hover:bg-emerald-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Taxes (Vergiler) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-emerald-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-emerald-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-emerald-700 text-white py-2 rounded hover:bg-emerald-800 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-emerald-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-emerald-700 text-white py-2 rounded hover:bg-emerald-800 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-emerald-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-emerald-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-emerald-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-emerald-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-emerald-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-emerald-600 text-white px-4 py-2 rounded hover:bg-emerald-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-teal-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-teal-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-emerald-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-emerald-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-emerald-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-emerald-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-emerald-800 text-emerald-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Taxes English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (TAXES) ---
        const terms = [
            { id: 1, en: &quot;Extend&quot;, tr: &quot;Hibe etmek / (borsa) Satmaya zorlamak&quot;, pron: &quot;ekstend&quot;, desc: &quot;To grant or bestow; in financial contexts, can imply extending credit or forcing a sale.&quot;, sample: &quot;The bank decided to extend the loan period.&quot;, sampleTr: &quot;Banka kredi süresini uzatmaya (hibe etmeye/vermeye) karar verdi.&quot; },
            { id: 2, en: &quot;Services&quot;, tr: &quot;Hizmetler&quot;, pron: &quot;sörvisis&quot;, desc: &quot;Action of helping or doing work for someone.&quot;, sample: &quot;Professional services are subject to tax.&quot;, sampleTr: &quot;Profesyonel hizmetler vergiye tabidir.&quot; },
            { id: 3, en: &quot;Uniform&quot;, tr: &quot;Düzenli / Tek tip&quot;, pron: &quot;yuniform&quot;, desc: &quot;Remaining the same in all cases and at all times.&quot;, sample: &quot;The tax rate should be uniform across states.&quot;, sampleTr: &quot;Vergi oranı eyaletler arasında düzenli (tek tip) olmalıdır.&quot; },
            { id: 4, en: &quot;Consume&quot;, tr: &quot;Tüketmek&quot;, pron: &quot;konsüyum&quot;, desc: &quot;Use up (a resource).&quot;, sample: &quot;If you consume goods, you pay sales tax.&quot;, sampleTr: &quot;Mal tüketirseniz satış vergisi ödersiniz.&quot; },
            { id: 5, en: &quot;Income&quot;, tr: &quot;Gelir&quot;, pron: &quot;inkam&quot;, desc: &quot;Money received, especially on a regular basis, for work or through investments.&quot;, sample: &quot;You must report all your income.&quot;, sampleTr: &quot;Tüm gelirinizi bildirmelisiniz.&quot; },
            { id: 6, en: &quot;Gross&quot;, tr: &quot;Brüt&quot;, pron: &quot;gros&quot;, desc: &quot;(Of income, profit, or interest) without deduction of tax or other contributions.&quot;, sample: &quot;His gross income was higher than expected.&quot;, sampleTr: &quot;Brüt geliri beklenenden yüksekti.&quot; },
            { id: 7, en: &quot;Calculate&quot;, tr: &quot;Hesaplamak&quot;, pron: &quot;kalkuleyt&quot;, desc: &quot;Determine (the amount or number of something) mathematically.&quot;, sample: &quot;It is difficult to calculate the exact tax.&quot;, sampleTr: &quot;Kesin vergiyi hesaplamak zordur.&quot; },
            { id: 8, en: &quot;Source&quot;, tr: &quot;Kaynak&quot;, pron: &quot;sors&quot;, desc: &quot;A place, person, or thing from which something comes or can be obtained.&quot;, sample: &quot;Tax at source is deducted by the employer.&quot;, sampleTr: &quot;Kaynaktaki vergi işveren tarafından kesilir.&quot; },
            { id: 9, en: &quot;Invest&quot;, tr: &quot;Yatırım yapmak&quot;, pron: &quot;invest&quot;, desc: &quot;Expend money with the expectation of achieving a profit.&quot;, sample: &quot;Companies invest in new machinery to reduce taxes.&quot;, sampleTr: &quot;Şirketler vergileri azaltmak için yeni makinelere yatırım yapar.&quot; },
            { id: 10, en: &quot;Particular&quot;, tr: &quot;Hususi / Özel&quot;, pron: &quot;partikülır&quot;, desc: &quot;Used to single out an individual member of a specified group or class.&quot;, sample: &quot;This particular tax applies only to luxury goods.&quot;, sampleTr: &quot;Bu hususi vergi sadece lüks mallar için geçerlidir.&quot; },
            { id: 11, en: &quot;Allow&quot;, tr: &quot;İzin vermek / Tanımak (indirim vb.)&quot;, pron: &quot;ellov&quot;, desc: &quot;Give the necessary time or opportunity for.&quot;, sample: &quot;The law allows certain deductions.&quot;, sampleTr: &quot;Yasa belirli kesintilere izin verir.&quot; },
            { id: 12, en: &quot;Status&quot;, tr: &quot;Kamu işleri / Statü&quot;, pron: &quot;steytıs&quot;, desc: &quot;The relative social, professional, or legal standing of someone or something.&quot;, sample: &quot;Your filing status determines your tax bracket.&quot;, sampleTr: &quot;Dosyalama statünüz (kamu işleri durumunuz) vergi diliminizi belirler.&quot; },
            { id: 13, en: &quot;Exempt&quot;, tr: &quot;Muaf tutmak&quot;, pron: &quot;ekzempt&quot;, desc: &quot;Free from an obligation or liability imposed on others.&quot;, sample: &quot;Charities are often exempt from tax.&quot;, sampleTr: &quot;Hayır kurumları genellikle vergiden muaf tutulur.&quot; },
            { id: 14, en: &quot;Itemize&quot;, tr: &quot;Ayrıntılarını belirtmek&quot;, pron: &quot;aytımayz&quot;, desc: &quot;Present as a list of individual items.&quot;, sample: &quot;You can choose to itemize your deductions.&quot;, sampleTr: &quot;Kesintilerinizin ayrıntılarını belirtmeyi seçebilirsiniz.&quot; },
            { id: 15, en: &quot;Casualty&quot;, tr: &quot;Ciddi ya da kaçınılmaz kaza&quot;, pron: &quot;kajıulti&quot;, desc: &quot;A person or thing badly affected by an event or situation.&quot;, sample: &quot;You can claim a deduction for casualty losses.&quot;, sampleTr: &quot;Ciddi kaza kayıpları için bir kesinti talep edebilirsiniz.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-emerald-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-emerald-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-emerald-200&#39;);
            activeBtn.classList.add(&#39;border-emerald-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-emerald-100 text-emerald-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-emerald-700 text-white px-4 py-2 rounded-full hover:bg-emerald-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-emerald-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-emerald-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-emerald-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-emerald-600 hover:text-emerald-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-emerald-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-emerald-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-emerald-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-emerald-600 hover:text-emerald-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-emerald-800&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-emerald-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-emerald-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-emerald-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-emerald-800&#39;, &#39;border&#39;, &#39;border-emerald-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-emerald-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-emerald-800&#39;, &#39;border&#39;, &#39;border-emerald-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-emerald-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-emerald-800&#39;, &#39;border&#39;, &#39;border-emerald-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-emerald-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-emerald-600 focus:ring-emerald-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/5880158015458222400/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/taxes-vergiler.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5880158015458222400'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5880158015458222400'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/taxes-vergiler.html' title='TAXES – VERGİLER'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1551793314934866623</id><published>2026-01-19T02:42:00.000-08:00</published><updated>2026-01-19T02:48:09.074-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>SOCIAL SECURITY – SOSYAL GÜVENLİK</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Social Security (Sosyal Güvenlik) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f3f4f6; } /* Gray-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-gray-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-user-shield text-2xl mr-3 text-gray-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Social Security English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Sosyal Güvenlik&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-gray-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-gray-400 hover:bg-gray-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-gray-300 border-b-4 border-transparent hover:text-white hover:bg-gray-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-gray-300 border-b-4 border-transparent hover:text-white hover:bg-gray-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-gray-300 border-b-4 border-transparent hover:text-white hover:bg-gray-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Social Security (Sosyal Güvenlik) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-gray-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-slate-200 text-slate-800 rounded hover:bg-slate-300 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-zinc-200 text-zinc-800 rounded hover:bg-zinc-300 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-gray-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-gray-700 text-white py-2 rounded hover:bg-gray-800 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-gray-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-gray-700 text-white py-2 rounded hover:bg-gray-800 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-gray-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-gray-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-gray-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-gray-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-gray-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-slate-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-slate-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-gray-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-gray-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-gray-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-gray-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-gray-800 text-gray-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Social Security English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (SOCIAL SECURITY) ---
        const terms = [
            { id: 1, en: &quot;Insolvent&quot;, tr: &quot;Aciz durumunda borcunu ödeyemez&quot;, pron: &quot;insolvınt&quot;, desc: &quot;Unable to pay debts owed.&quot;, sample: &quot;The social security fund must not become insolvent.&quot;, sampleTr: &quot;Sosyal güvenlik fonu aciz durumuna düşmemelidir.&quot; },
            { id: 2, en: &quot;Ingrained&quot;, tr: &quot;Kökleşmiş&quot;, pron: &quot;ingreynt&quot;, desc: &quot;Firmly fixed or established; difficult to change.&quot;, sample: &quot;The system is ingrained in the national economy.&quot;, sampleTr: &quot;Sistem ulusal ekonomiye kökleşmiştir.&quot; },
            { id: 3, en: &quot;Dire&quot;, tr: &quot;Korkunç / Vahim&quot;, pron: &quot;dayr&quot;, desc: &quot;(Of a situation or event) extremely serious or urgent.&quot;, sample: &quot;Many elderly people would be in dire poverty without it.&quot;, sampleTr: &quot;Birçok yaşlı insan onsuz korkunç (vahim) bir yoksulluk içinde olurdu.&quot; },
            { id: 4, en: &quot;Project&quot;, tr: &quot;Taşmak / Tahmin etmek (Bağlama göre)&quot;, pron: &quot;procekt&quot;, desc: &quot;Estimate or forecast (something) on the basis of present trends.&quot;, sample: &quot;Costs are projected to increase next year.&quot;, sampleTr: &quot;Maliyetlerin gelecek yıl artması (taşması/tahmin edilmesi) bekleniyor.&quot; },
            { id: 5, en: &quot;Fund&quot;, tr: &quot;Masrafları üstlenmek / Ödemek / Fonlamak&quot;, pron: &quot;fand&quot;, desc: &quot;Provide with money for a particular purpose.&quot;, sample: &quot;Taxes fund the social security program.&quot;, sampleTr: &quot;Vergiler sosyal güvenlik programının masraflarını üstlenir (fonlar).&quot; },
            { id: 6, en: &quot;Cover&quot;, tr: &quot;Sigorta etmek / Kapsamak&quot;, pron: &quot;kavır&quot;, desc: &quot;Protect or indemnify (someone) against liability, loss, or accident.&quot;, sample: &quot;Does this policy cover disability?&quot;, sampleTr: &quot;Bu poliçe engelliliği sigorta eder mi (kapsar mı)?&quot; },
            { id: 7, en: &quot;Collect&quot;, tr: &quot;Uygulamaya sokmak / Toplamak&quot;, pron: &quot;kollekt&quot;, desc: &quot;Bring or gather together (things, typically when scattered or widespread).&quot;, sample: &quot;The agency collects premiums from workers.&quot;, sampleTr: &quot;Ajans işçilerden primleri toplar (uygulamaya sokar).&quot; },
            { id: 8, en: &quot;Qualify&quot;, tr: &quot;Nitelendirmek / Hak kazanmak&quot;, pron: &quot;kualifay&quot;, desc: &quot;Be entitled to a particular benefit or privilege by fulfilling a necessary condition.&quot;, sample: &quot;You must work for ten years to qualify.&quot;, sampleTr: &quot;Hak kazanmak (nitelendirmek) için on yıl çalışmalısınız.&quot; },
            { id: 9, en: &quot;Mandatory&quot;, tr: &quot;Gerekli / Zorunlu&quot;, pron: &quot;mandatori&quot;, desc: &quot;Required by law or rules; compulsory.&quot;, sample: &quot;Participation in the system is mandatory.&quot;, sampleTr: &quot;Sisteme katılım gereklidir (zorunludur).&quot; },
            { id: 10, en: &quot;Deduction&quot;, tr: &quot;Kesinti&quot;, pron: &quot;didakşın&quot;, desc: &quot;The action of deducting or subtracting something.&quot;, sample: &quot;You will see a deduction on your paycheck.&quot;, sampleTr: &quot;Maaş çekinizde bir kesinti göreceksiniz.&quot; },
            { id: 11, en: &quot;Adjust&quot;, tr: &quot;Ayarlamak&quot;, pron: &quot;edcast&quot;, desc: &quot;Alter or move (something) slightly in order to achieve the desired fit, appearance, or result.&quot;, sample: &quot;Benefits are adjusted for inflation annually.&quot;, sampleTr: &quot;Yardımlar yıllık olarak enflasyona göre ayarlanır.&quot; },
            { id: 12, en: &quot;Weight&quot;, tr: &quot;Ağırlaştırmak / Ağırlık vermek&quot;, pron: &quot;vayt&quot;, desc: &quot;Attach importance or value to.&quot;, sample: &quot;The formula weights recent earnings more heavily.&quot;, sampleTr: &quot;Formül son kazançlara daha fazla ağırlık verir (ağırlaştırır).&quot; },
            { id: 13, en: &quot;Return&quot;, tr: &quot;Kar sağlamak / Getiri&quot;, pron: &quot;ritörn&quot;, desc: &quot;A profit from an investment.&quot;, sample: &quot;The fund aims to generate a good return.&quot;, sampleTr: &quot;Fon iyi bir kar sağlamayı (getiri) hedefler.&quot; },
            { id: 14, en: &quot;Draw&quot;, tr: &quot;(Para, faiz) almak / Çekmek&quot;, pron: &quot;drov&quot;, desc: &quot;Take or obtain (money) from a bank or account.&quot;, sample: &quot;He can start to draw benefits at age 62.&quot;, sampleTr: &quot;62 yaşında yardım almaya (çekmeye) başlayabilir.&quot; },
            { id: 15, en: &quot;Determine&quot;, tr: &quot;Karar vermek / Belirlemek&quot;, pron: &quot;ditörmin&quot;, desc: &quot;Cause (something) to occur in a particular way; be the decisive factor in.&quot;, sample: &quot;Your earnings determine your benefit amount.&quot;, sampleTr: &quot;Kazançlarınız yardım miktarınızı belirler (karar verir).&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-gray-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-gray-300&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-gray-300&#39;);
            activeBtn.classList.add(&#39;border-gray-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-gray-100 text-gray-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-gray-700 text-white px-4 py-2 rounded-full hover:bg-gray-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-gray-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-gray-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-gray-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-gray-600 hover:text-gray-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-gray-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-gray-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-gray-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-gray-600 hover:text-gray-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-gray-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-gray-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-gray-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-gray-800&#39;, &#39;border&#39;, &#39;border-gray-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-gray-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-gray-800&#39;, &#39;border&#39;, &#39;border-gray-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-gray-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-gray-800&#39;, &#39;border&#39;, &#39;border-gray-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-gray-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-gray-600 focus:ring-gray-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1551793314934866623/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/social-security-sosyal-guvenlik.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1551793314934866623'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1551793314934866623'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/social-security-sosyal-guvenlik.html' title='SOCIAL SECURITY – SOSYAL GÜVENLİK'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-7049942272706762228</id><published>2026-01-19T02:39:00.000-08:00</published><updated>2026-01-19T02:48:09.074-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>PERSONAL INJURY – KİŞİSEL ZARAR </title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Personal Injury (Kişisel Zarar) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fff1f2; } /* Rose-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-rose-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-crutch text-2xl mr-3 text-rose-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Personal Injury English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Kişisel Zarar Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-rose-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-rose-400 hover:bg-rose-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-rose-200 border-b-4 border-transparent hover:text-white hover:bg-rose-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-rose-200 border-b-4 border-transparent hover:text-white hover:bg-rose-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-rose-200 border-b-4 border-transparent hover:text-white hover:bg-rose-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Personal Injury (Kişisel Zarar) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-rose-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-rose-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-rose-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-rose-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-rose-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-rose-600 text-white px-4 py-2 rounded hover:bg-rose-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-rose-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-rose-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-rose-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-rose-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-rose-800 text-rose-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Personal Injury English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (PERSONAL INJURY) ---
        const terms = [
            { id: 1, en: &quot;Document&quot;, tr: &quot;Belgelemek&quot;, pron: &quot;doküment&quot;, desc: &quot;Record (something) in written, photographic, or other form.&quot;, sample: &quot;It is important to document the accident scene.&quot;, sampleTr: &quot;Kaza yerini belgelemek önemlidir.&quot; },
            { id: 2, en: &quot;Compensate&quot;, tr: &quot;Telafi etmek / Tazmin etmek&quot;, pron: &quot;kompenseyt&quot;, desc: &quot;Give (someone) something, typically money, in recognition of loss, suffering, or injury.&quot;, sample: &quot;The insurance will compensate the victim.&quot;, sampleTr: &quot;Sigorta, kurbanı telafi edecek (zararını karşılayacak).&quot; },
            { id: 3, en: &quot;Victim&quot;, tr: &quot;Kurban / Mağdur&quot;, pron: &quot;viktim&quot;, desc: &quot;A person harmed, injured, or killed as a result of a crime or accident.&quot;, sample: &quot;The victim was taken to the hospital.&quot;, sampleTr: &quot;Kurban hastaneye kaldırıldı.&quot; },
            { id: 4, en: &quot;Technique&quot;, tr: &quot;Teknik&quot;, pron: &quot;teknik&quot;, desc: &quot;A way of carrying out a particular task.&quot;, sample: &quot;The doctor used a new surgical technique.&quot;, sampleTr: &quot;Doktor yeni bir cerrahi teknik kullandı.&quot; },
            { id: 5, en: &quot;Consistent&quot;, tr: &quot;Düzenli / Tutarlı&quot;, pron: &quot;konsistınt&quot;, desc: &quot;Acting or done in the same way over time.&quot;, sample: &quot;His story was consistent with the evidence.&quot;, sampleTr: &quot;Hikayesi kanıtlarla tutarlıydı (düzenliydi).&quot; },
            { id: 6, en: &quot;Detail&quot;, tr: &quot;Ayrıntı&quot;, pron: &quot;diteyıl&quot;, desc: &quot;An individual feature, fact, or item.&quot;, sample: &quot;Please describe the incident in detail.&quot;, sampleTr: &quot;Lütfen olayı ayrıntılı olarak betimleyin.&quot; },
            { id: 7, en: &quot;Incident&quot;, tr: &quot;Olay&quot;, pron: &quot;insidınt&quot;, desc: &quot;An event or occurrence.&quot;, sample: &quot;The incident caused minor injuries.&quot;, sampleTr: &quot;Olay küçük yaralanmalara neden oldu.&quot; },
            { id: 8, en: &quot;Demand&quot;, tr: &quot;Mahkemeye celbetmek / Talep etmek&quot;, pron: &quot;dimend&quot;, desc: &quot;An insistent and peremptory request.&quot;, sample: &quot;They sent a letter to demand compensation.&quot;, sampleTr: &quot;Tazminat talep etmek (mahkemeye celbetmek) için bir mektup gönderdiler.&quot; },
            { id: 9, en: &quot;Claim&quot;, tr: &quot;Zararların ödenmesini talep etmek / İddia&quot;, pron: &quot;kleym&quot;, desc: &quot;State or assert that something is the case.&quot;, sample: &quot;He filed a claim for personal injury.&quot;, sampleTr: &quot;Kişisel zarar (zararların ödenmesi) için talepte bulundu.&quot; },
            { id: 10, en: &quot;Sustain&quot;, tr: &quot;Dayanmak / Maruz kalmak&quot;, pron: &quot;sasteyn&quot;, desc: &quot;Undergo or suffer (something unpleasant, especially an injury).&quot;, sample: &quot;Did the passenger sustain any injuries?&quot;, sampleTr: &quot;Yolcu herhangi bir yaralanmaya maruz kaldı mı (dayandı mı)?&quot; },
            { id: 11, en: &quot;Describe&quot;, tr: &quot;Betimlemek / Tanımlamak&quot;, pron: &quot;diskrayb&quot;, desc: &quot;Give an account in words of (someone or something).&quot;, sample: &quot;Can you describe the pain you felt?&quot;, sampleTr: &quot;Hissettiğiniz acıyı betimleyebilir misiniz?&quot; },
            { id: 12, en: &quot;Opportunity&quot;, tr: &quot;Fırsat&quot;, pron: &quot;oporçuniti&quot;, desc: &quot;A set of circumstances that makes it possible to do something.&quot;, sample: &quot;This is an opportunity to settle the case.&quot;, sampleTr: &quot;Bu, davayı halletmek için bir fırsattır.&quot; },
            { id: 13, en: &quot;Habit&quot;, tr: &quot;İtiyat / Alışkanlık&quot;, pron: &quot;hebit&quot;, desc: &quot;A settled or regular tendency or practice.&quot;, sample: &quot;It was his habit to walk at night.&quot;, sampleTr: &quot;Gece yürümek onun itiyatıydı (alışkanlığıydı).&quot; },
            { id: 14, en: &quot;Physical&quot;, tr: &quot;Fiziksel&quot;, pron: &quot;fizikıl&quot;, desc: &quot;Relating to the body as opposed to the mind.&quot;, sample: &quot;The accident caused physical damage.&quot;, sampleTr: &quot;Kaza fiziksel hasara yol açtı.&quot; },
            { id: 15, en: &quot;Modify&quot;, tr: &quot;Uyarlamak / Değiştirmek&quot;, pron: &quot;modifay&quot;, desc: &quot;Make partial or minor changes to (something).&quot;, sample: &quot;We need to modify the settlement offer.&quot;, sampleTr: &quot;Uzlaşma teklifini uyarlamamız (değiştirmemiz) gerekiyor.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-rose-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-rose-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-rose-200&#39;);
            activeBtn.classList.add(&#39;border-rose-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-rose-100 text-rose-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-rose-700 text-white px-4 py-2 rounded-full hover:bg-rose-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-rose-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-rose-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-rose-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-rose-600 hover:text-rose-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-rose-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-rose-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-rose-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-rose-600 hover:text-rose-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-rose-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-rose-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-rose-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-rose-800&#39;, &#39;border&#39;, &#39;border-rose-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-rose-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-rose-800&#39;, &#39;border&#39;, &#39;border-rose-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-rose-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-rose-800&#39;, &#39;border&#39;, &#39;border-rose-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-rose-100 text-rose-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-rose-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-rose-600 focus:ring-rose-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/7049942272706762228/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/personal-injury-kisisel-zarar.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/7049942272706762228'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/7049942272706762228'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/personal-injury-kisisel-zarar.html' title='PERSONAL INJURY – KİŞİSEL ZARAR '/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-7030906202656326582</id><published>2026-01-19T02:36:00.000-08:00</published><updated>2026-01-19T02:48:09.074-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>PATENTS - PATENTLER</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Patents (Patentler) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fafafa; } /* Zinc-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-zinc-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-lightbulb text-2xl mr-3 text-zinc-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Patents English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Patent Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-zinc-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-zinc-400 hover:bg-zinc-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-zinc-300 border-b-4 border-transparent hover:text-white hover:bg-zinc-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-zinc-300 border-b-4 border-transparent hover:text-white hover:bg-zinc-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-zinc-300 border-b-4 border-transparent hover:text-white hover:bg-zinc-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Patents (Patentler) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-zinc-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-gray-200 text-gray-800 rounded hover:bg-gray-300 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-stone-200 text-stone-800 rounded hover:bg-stone-300 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-slate-200 text-slate-800 rounded hover:bg-slate-300 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-zinc-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-zinc-700 text-white py-2 rounded hover:bg-zinc-800 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-zinc-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-zinc-700 text-white py-2 rounded hover:bg-zinc-800 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-zinc-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-zinc-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-zinc-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-zinc-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-zinc-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-zinc-600 text-white px-4 py-2 rounded hover:bg-zinc-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-zinc-400&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-zinc-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-zinc-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-zinc-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-zinc-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-zinc-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-zinc-800 text-zinc-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Patents English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (PATENTS) ---
        const terms = [
            { id: 1, en: &quot;Product&quot;, tr: &quot;Ürün&quot;, pron: &quot;prodakt&quot;, desc: &quot;An article or substance that is manufactured or refined for sale.&quot;, sample: &quot;The new product was patented immediately.&quot;, sampleTr: &quot;Yeni ürün hemen patentlendi.&quot; },
            { id: 2, en: &quot;Manufacture&quot;, tr: &quot;Yapmak / Üretmek&quot;, pron: &quot;manüfekçır&quot;, desc: &quot;Make (something) on a large scale using machinery.&quot;, sample: &quot;They manufacture electronic components.&quot;, sampleTr: &quot;Elektronik bileşenler üretirler (yaparlar).&quot; },
            { id: 3, en: &quot;Deceive&quot;, tr: &quot;Aldatmak&quot;, pron: &quot;disiiv&quot;, desc: &quot;To cause someone to believe something that is not true.&quot;, sample: &quot;It is illegal to deceive the patent office.&quot;, sampleTr: &quot;Patent ofisini aldatmak yasa dışıdır.&quot; },
            { id: 4, en: &quot;Encourage&quot;, tr: &quot;Cesaretlendirmek / Teşvik etmek&quot;, pron: &quot;enkarıc&quot;, desc: &quot;Give support, confidence, or hope to (someone).&quot;, sample: &quot;Patents encourage innovation.&quot;, sampleTr: &quot;Patentler yeniliği cesaretlendirir (teşvik eder).&quot; },
            { id: 5, en: &quot;Innovation&quot;, tr: &quot;Yenilik&quot;, pron: &quot;inoveyşın&quot;, desc: &quot;A new method, idea, product, etc.&quot;, sample: &quot;Technological innovation drives the economy.&quot;, sampleTr: &quot;Teknolojik yenilik ekonomiyi yönlendirir.&quot; },
            { id: 6, en: &quot;Transform&quot;, tr: &quot;Değiştirmek / Dönüştürmek&quot;, pron: &quot;transform&quot;, desc: &quot;Make a thorough or dramatic change in form, appearance, or character.&quot;, sample: &quot;This invention will transform the industry.&quot;, sampleTr: &quot;Bu icat endüstriyi değiştirecek (dönüştürecek).&quot; },
            { id: 7, en: &quot;Attract&quot;, tr: &quot;Çekmek / Celbetmek&quot;, pron: &quot;attract&quot;, desc: &quot;Cause to come to a place or participate in a venture.&quot;, sample: &quot;New patents attract investors.&quot;, sampleTr: &quot;Yeni patentler yatırımcıları çeker.&quot; },
            { id: 8, en: &quot;Capital&quot;, tr: &quot;Anapara / Sermaye&quot;, pron: &quot;kepıtıl&quot;, desc: &quot;Wealth in the form of money or other assets owned by a person or organization.&quot;, sample: &quot;They need capital to start production.&quot;, sampleTr: &quot;Üretime başlamak için anaparaya (sermayeye) ihtiyaçları var.&quot; },
            { id: 9, en: &quot;Invent&quot;, tr: &quot;İcat etmek&quot;, pron: &quot;invent&quot;, desc: &quot;Create or design (something that has not existed before).&quot;, sample: &quot;Edison did not invent the lightbulb alone.&quot;, sampleTr: &quot;Edison ampulü tek başına icat etmedi.&quot; },
            { id: 10, en: &quot;Discover&quot;, tr: &quot;Keşfetmek&quot;, pron: &quot;diskavır&quot;, desc: &quot;Find (something or someone) unexpectedly or in the course of a search.&quot;, sample: &quot;Scientists hope to discover a cure.&quot;, sampleTr: &quot;Bilim insanları bir çare keşfetmeyi umuyor.&quot; },
            { id: 11, en: &quot;Prototype&quot;, tr: &quot;Esas model / Prototip&quot;, pron: &quot;prototayp&quot;, desc: &quot;A first, typical or preliminary model of something.&quot;, sample: &quot;The prototype worked perfectly.&quot;, sampleTr: &quot;Esas model (prototip) mükemmel çalıştı.&quot; },
            { id: 12, en: &quot;Contribute&quot;, tr: &quot;Katkıda bulunmak&quot;, pron: &quot;konrtribüyut&quot;, desc: &quot;Give (something, especially money) in order to help achieve or provide something.&quot;, sample: &quot;Many engineers contribute to a single patent.&quot;, sampleTr: &quot;Birçok mühendis tek bir patente katkıda bulunur.&quot; },
            { id: 13, en: &quot;Sole&quot;, tr: &quot;Tek / Yegane&quot;, pron: &quot;sol&quot;, desc: &quot;Being the only one.&quot;, sample: &quot;The inventor has the sole right to sell it.&quot;, sampleTr: &quot;Mucit, onu satma konusunda tek (yegane) hakka sahiptir.&quot; },
            { id: 14, en: &quot;Secrecy&quot;, tr: &quot;Gizlilik&quot;, pron: &quot;sikrısi&quot;, desc: &quot;The action of keeping something secret or the state of being kept secret.&quot;, sample: &quot;Trade secrecy is an alternative to patenting.&quot;, sampleTr: &quot;Ticari gizlilik, patentlemenin bir alternatifidir.&quot; },
            { id: 15, en: &quot;Pending&quot;, tr: &quot;Beklemede&quot;, pron: &quot;pending&quot;, desc: &quot;Awaiting decision or settlement.&quot;, sample: &quot;The patent application is pending.&quot;, sampleTr: &quot;Patent başvurusu beklemededir.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-zinc-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-zinc-300&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-zinc-300&#39;);
            activeBtn.classList.add(&#39;border-zinc-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-zinc-100 text-zinc-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-zinc-700 text-white px-4 py-2 rounded-full hover:bg-zinc-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-zinc-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-zinc-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-zinc-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-zinc-600 hover:text-zinc-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-zinc-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-zinc-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-zinc-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-zinc-600 hover:text-zinc-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-zinc-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-zinc-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-zinc-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-zinc-800&#39;, &#39;border&#39;, &#39;border-zinc-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-zinc-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-zinc-800&#39;, &#39;border&#39;, &#39;border-zinc-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-zinc-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-zinc-800&#39;, &#39;border&#39;, &#39;border-zinc-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-zinc-100 text-zinc-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-zinc-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-zinc-600 focus:ring-zinc-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/7030906202656326582/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/patents-patentler.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/7030906202656326582'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/7030906202656326582'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/patents-patentler.html' title='PATENTS - PATENTLER'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-5001892099308662096</id><published>2026-01-19T02:34:00.000-08:00</published><updated>2026-01-19T02:48:09.074-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>LANDLORDS – EMLAKINI KiRAYA VEREN MAL SAHİPLERİ </title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Landlords (Emlak Sahipleri) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fefce8; } /* Yellow-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-yellow-700 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-house-user text-2xl mr-3 text-yellow-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Landlords English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Mal Sahipleri&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-yellow-800&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-yellow-400 hover:bg-yellow-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-yellow-200 border-b-4 border-transparent hover:text-white hover:bg-yellow-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-yellow-200 border-b-4 border-transparent hover:text-white hover:bg-yellow-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-yellow-200 border-b-4 border-transparent hover:text-white hover:bg-yellow-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Landlords (Mal Sahipleri) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-yellow-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-teal-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-teal-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-yellow-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-yellow-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-yellow-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-yellow-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-yellow-800 text-yellow-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Landlords English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (LANDLORDS) ---
        const terms = [
            { id: 1, en: &quot;Assure&quot;, tr: &quot;Temin etmek / Güvence vermek&quot;, pron: &quot;aşşur&quot;, desc: &quot;To tell someone something positively to dispel any doubts.&quot;, sample: &quot;I assure you the property is safe.&quot;, sampleTr: &quot;Mülkün güvenli olduğunu size temin ederim.&quot; },
            { id: 2, en: &quot;Premises&quot;, tr: &quot;Arazi ve üzerindeki bina / Mülk&quot;, pron: &quot;premisis&quot;, desc: &quot;A house or building, together with its land and outbuildings.&quot;, sample: &quot;Smoking is prohibited on the premises.&quot;, sampleTr: &quot;Arazi ve bina içinde (mülkte) sigara içmek yasaktır.&quot; },
            { id: 3, en: &quot;Notice&quot;, tr: &quot;Tebliğ / İhbar&quot;, pron: &quot;notis&quot;, desc: &quot;Notification or warning of something.&quot;, sample: &quot;The tenant gave a 30-day notice.&quot;, sampleTr: &quot;Kiracı 30 günlük ihbar (tebliğ) verdi.&quot; },
            { id: 4, en: &quot;Guarantee&quot;, tr: &quot;Garanti vermek&quot;, pron: &quot;garantii&quot;, desc: &quot;A formal assurance (typically in writing) that certain conditions will be fulfilled.&quot;, sample: &quot;We guarantee that repairs will be made promptly.&quot;, sampleTr: &quot;Tamiratların derhal yapılacağına garanti veriyoruz.&quot; },
            { id: 5, en: &quot;Reasonable&quot;, tr: &quot;Geçerli / Makul&quot;, pron: &quot;riizınıbıl&quot;, desc: &quot;Having sound judgment; fair and sensible.&quot;, sample: &quot;The landlord made a reasonable request.&quot;, sampleTr: &quot;Ev sahibi makul (geçerli) bir talepte bulundu.&quot; },
            { id: 6, en: &quot;Term&quot;, tr: &quot;Koşul / Süre&quot;, pron: &quot;törm&quot;, desc: &quot;A fixed or limited period for which something lasts or is intended to last; conditions.&quot;, sample: &quot;The term of the lease is one year.&quot;, sampleTr: &quot;Kira sözleşmesinin süresi (koşulu) bir yıldır.&quot; },
            { id: 7, en: &quot;Evict&quot;, tr: &quot;Tahliye ettirmek&quot;, pron: &quot;evikt&quot;, desc: &quot;Expel (someone) from a property, especially with the support of the law.&quot;, sample: &quot;They had to evict the tenant for non-payment.&quot;, sampleTr: &quot;Ödeme yapılmadığı için kiracıyı tahliye ettirmek zorunda kaldılar.&quot; },
            { id: 8, en: &quot;Practical&quot;, tr: &quot;Uygulanabilir / Pratik&quot;, pron: &quot;pirektikıl&quot;, desc: &quot;Of or concerned with the actual doing or use of something rather than with theory.&quot;, sample: &quot;We need a practical solution to the noise problem.&quot;, sampleTr: &quot;Gürültü sorununa uygulanabilir (pratik) bir çözüme ihtiyacımız var.&quot; },
            { id: 9, en: &quot;Abandon&quot;, tr: &quot;Feragat etmek / Terk etmek&quot;, pron: &quot;ebendın&quot;, desc: &quot;Cease to support or look after (someone); desert.&quot;, sample: &quot;Did the tenant abandon the apartment?&quot;, sampleTr: &quot;Kiracı daireyi terk mi etti (feragat mı etti)?&quot; },
            { id: 10, en: &quot;Force&quot;, tr: &quot;Zorla yapmak / Güç kullanmak&quot;, pron: &quot;fors&quot;, desc: &quot;Make a way through or into by physical strength; break open by force.&quot;, sample: &quot;You cannot force entry into the unit.&quot;, sampleTr: &quot;Birim içine zorla giriş yapamazsınız.&quot; },
            { id: 11, en: &quot;Conflict&quot;, tr: &quot;Anlaşmazlık / Çatışma&quot;, pron: &quot;konflikt&quot;, desc: &quot;A serious disagreement or argument.&quot;, sample: &quot;There was a conflict regarding the security deposit.&quot;, sampleTr: &quot;Güvenlik depozitosu konusunda bir anlaşmazlık vardı.&quot; },
            { id: 12, en: &quot;Mediate&quot;, tr: &quot;Uzlaştırmak / Arabuluculuk yapmak&quot;, pron: &quot;medieyt&quot;, desc: &quot;Intervene between people in a dispute in order to bring about an agreement or reconciliation.&quot;, sample: &quot;A lawyer can help mediate the dispute.&quot;, sampleTr: &quot;Bir avukat anlaşmazlığı uzlaştırmaya yardımcı olabilir.&quot; },
            { id: 13, en: &quot;Compromise&quot;, tr: &quot;Uzlaşmak / Fedakarlıkla orta yol bulmak&quot;, pron: &quot;kompromis&quot;, desc: &quot;An agreement or a settlement of a dispute that is reached by each side making concessions.&quot;, sample: &quot;They reached a compromise on the rent increase.&quot;, sampleTr: &quot;Kira artışı konusunda uzlaştılar (orta yol buldular).&quot; },
            { id: 14, en: &quot;Violate&quot;, tr: &quot;Bozmak / İhlal etmek&quot;, pron: &quot;vaylıt&quot;, desc: &quot;Break or fail to comply with (a rule or formal agreement).&quot;, sample: &quot;Do not violate the terms of the contract.&quot;, sampleTr: &quot;Sözleşme koşullarını bozmayın (ihlal etmeyin).&quot; },
            { id: 15, en: &quot;Intrude&quot;, tr: &quot;Davetsiz girmek / Rahatsız etmek&quot;, pron: &quot;intrude&quot;, desc: &quot;Put oneself deliberately into a place or situation where one is unwelcome or uninvited.&quot;, sample: &quot;Landlords should not intrude on tenant privacy.&quot;, sampleTr: &quot;Ev sahipleri kiracı mahremiyetine davetsiz girmemelidir (rahatsız etmemelidir).&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-yellow-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-yellow-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-yellow-200&#39;);
            activeBtn.classList.add(&#39;border-yellow-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-yellow-100 text-yellow-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-yellow-700 text-white px-4 py-2 rounded-full hover:bg-yellow-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-yellow-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-yellow-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-yellow-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-yellow-600 hover:text-yellow-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-yellow-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-yellow-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-yellow-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-yellow-600 hover:text-yellow-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-yellow-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-yellow-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-yellow-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-yellow-800&#39;, &#39;border&#39;, &#39;border-yellow-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-yellow-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-yellow-800&#39;, &#39;border&#39;, &#39;border-yellow-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-yellow-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-yellow-800&#39;, &#39;border&#39;, &#39;border-yellow-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-yellow-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-yellow-600 focus:ring-yellow-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/5001892099308662096/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/landlords-emlakini-kiraya-veren-mal.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5001892099308662096'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5001892099308662096'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/landlords-emlakini-kiraya-veren-mal.html' title='LANDLORDS – EMLAKINI KiRAYA VEREN MAL SAHİPLERİ '/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-7311334887303515504</id><published>2026-01-19T02:31:00.000-08:00</published><updated>2026-01-19T02:31:20.701-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>JUVENILES – ÇOCUKLAR</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Juveniles (Çocuklar) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fff7ed; } /* Orange-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-orange-700 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-child text-2xl mr-3 text-orange-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Juveniles English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Çocuk Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-orange-800&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-orange-400 hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-orange-200 border-b-4 border-transparent hover:text-white hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-orange-200 border-b-4 border-transparent hover:text-white hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-orange-200 border-b-4 border-transparent hover:text-white hover:bg-orange-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Juveniles (Çocuklar) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-orange-500&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-orange-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-orange-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-orange-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-orange-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-orange-800 text-orange-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Juvenile Law English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (JUVENILES) ---
        const terms = [
            { id: 1, en: &quot;Deal with&quot;, tr: &quot;İlgisi olmak / Başa çıkmak&quot;, pron: &quot;diyıl vit&quot;, desc: &quot;Take measures concerning someone or something; handle.&quot;, sample: &quot;Juvenile courts deal with young offenders.&quot;, sampleTr: &quot;Çocuk mahkemeleri genç suçlularla (ilgilenir) başa çıkar.&quot; },
            { id: 2, en: &quot;Commit&quot;, tr: &quot;Yapmak (suç vb.)&quot;, pron: &quot;komit&quot;, desc: &quot;Carry out or perpetrate (a mistake, crime, or immoral act).&quot;, sample: &quot;He did not commit the crime alone.&quot;, sampleTr: &quot;Suçu tek başına işlemedi (yapmadı).&quot; },
            { id: 3, en: &quot;Define&quot;, tr: &quot;Tanımlamak&quot;, pron: &quot;difayn&quot;, desc: &quot;State or describe exactly the nature, scope, or meaning of.&quot;, sample: &quot;The law defines a juvenile as under 18.&quot;, sampleTr: &quot;Yasa, bir çocuğu 18 yaşın altındaki kişi olarak tanımlar.&quot; },
            { id: 4, en: &quot;Support&quot;, tr: &quot;Desteklemek&quot;, pron: &quot;saport&quot;, desc: &quot;Bear all or part of the weight of; hold up.&quot;, sample: &quot;The program is designed to support troubled youth.&quot;, sampleTr: &quot;Program sorunlu gençleri desteklemek için tasarlandı.&quot; },
            { id: 5, en: &quot;Take into account&quot;, tr: &quot;Hesaba katmak&quot;, pron: &quot;teyk intu ekaunt&quot;, desc: &quot;Consider particular facts or circumstances when making a decision.&quot;, sample: &quot;The judge will take into account his age.&quot;, sampleTr: &quot;Yargıç yaşını hesaba katacak.&quot; },
            { id: 6, en: &quot;Accuse&quot;, tr: &quot;Suçlamak&quot;, pron: &quot;ekuus&quot;, desc: &quot;Charge (someone) with an offense or crime.&quot;, sample: &quot;They accuse him of theft.&quot;, sampleTr: &quot;Onu hırsızlıkla suçluyorlar.&quot; },
            { id: 7, en: &quot;Delinquent&quot;, tr: &quot;Basit suçlar işleyen genç suçlu / Suçlu çocuk&quot;, pron: &quot;delinkuent&quot;, desc: &quot;(Typically of a young person or that person&#39;s behavior) showing or characterized by a tendency to commit crime, particularly minor crime.&quot;, sample: &quot;The juvenile delinquent was sent to a reform school.&quot;, sampleTr: &quot;Suçlu çocuk (genç suçlu) bir ıslahevine gönderildi.&quot; },
            { id: 8, en: &quot;Consequence&quot;, tr: &quot;Sonuç&quot;, pron: &quot;konsekuens&quot;, desc: &quot;A result or effect of an action or condition.&quot;, sample: &quot;Every action has a consequence.&quot;, sampleTr: &quot;Her eylemin bir sonucu vardır.&quot; },
            { id: 9, en: &quot;Depraved&quot;, tr: &quot;Ahlaksız / Bozulmuş&quot;, pron: &quot;dipreyvt&quot;, desc: &quot;Morally corrupt; wicked.&quot;, sample: &quot;The act showed a depraved mind.&quot;, sampleTr: &quot;Eylem ahlaksız (bozulmuş) bir zihniyeti gösterdi.&quot; },
            { id: 10, en: &quot;Capacity&quot;, tr: &quot;Hacim / Kapasite / Ehliyet&quot;, pron: &quot;kepasiti&quot;, desc: &quot;The ability or power to do, experience, or understand something.&quot;, sample: &quot;The facility has reached its capacity.&quot;, sampleTr: &quot;Tesis kapasitesine (hacmine) ulaştı.&quot; },
            { id: 11, en: &quot;Juvenile&quot;, tr: &quot;Çocuk / Genç&quot;, pron: &quot;cuvenayl&quot;, desc: &quot;Of, for, or relating to young people.&quot;, sample: &quot;Juvenile crime is rising.&quot;, sampleTr: &quot;Çocuk (genç) suçları artıyor.&quot; },
            { id: 12, en: &quot;Offense&quot;, tr: &quot;Kanuna karşı gelmek / Suç&quot;, pron: &quot;ofens&quot;, desc: &quot;A breach of a law or rule; an illegal act.&quot;, sample: &quot;This is his first offense.&quot;, sampleTr: &quot;Bu onun kanuna ilk karşı gelişi (ilk suçu).&quot; },
            { id: 13, en: &quot;Detain&quot;, tr: &quot;Alıkoymak / Gözaltına almak&quot;, pron: &quot;diteyn&quot;, desc: &quot;Keep (someone) in official custody.&quot;, sample: &quot;Police can detain suspects for questioning.&quot;, sampleTr: &quot;Polis şüphelileri sorgulamak için alıkoyabilir (gözaltına alabilir).&quot; },
            { id: 14, en: &quot;Reason&quot;, tr: &quot;Sebep / Akıl&quot;, pron: &quot;riizın&quot;, desc: &quot;A cause, explanation, or justification for an action or event.&quot;, sample: &quot;What is the reason for his behavior?&quot;, sampleTr: &quot;Davranışının sebebi nedir?&quot; },
            { id: 15, en: &quot;Rehabilitate&quot;, tr: &quot;Rehabilite etmek / İyileştirmek&quot;, pron: &quot;rehabiliteyt&quot;, desc: &quot;Restore (someone) to health or normal life by training and therapy after imprisonment, addiction, or illness.&quot;, sample: &quot;The goal is to rehabilitate young offenders.&quot;, sampleTr: &quot;Amaç genç suçluları rehabilite etmektir (iyileştirmektir).&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-orange-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-orange-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-orange-200&#39;);
            activeBtn.classList.add(&#39;border-orange-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-orange-100 text-orange-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-orange-700 text-white px-4 py-2 rounded-full hover:bg-orange-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-orange-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-orange-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-orange-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-orange-600 hover:text-orange-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-orange-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-orange-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-orange-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-orange-600 hover:text-orange-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-orange-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-orange-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-orange-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-orange-800&#39;, &#39;border&#39;, &#39;border-orange-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-orange-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-orange-800&#39;, &#39;border&#39;, &#39;border-orange-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-orange-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-orange-800&#39;, &#39;border&#39;, &#39;border-orange-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-orange-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-orange-600 focus:ring-orange-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/7311334887303515504/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/juveniles-cocuklar.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/7311334887303515504'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/7311334887303515504'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/juveniles-cocuklar.html' title='JUVENILES – ÇOCUKLAR'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1829557339554990443</id><published>2026-01-19T02:29:40.572-08:00</published><updated>2026-01-19T02:30:03.558-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>IMMIGRATION II – GÖÇ II</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Immigration II (Göç II) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fdf2f8; } /* Pink-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-pink-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-passport text-2xl mr-3 text-pink-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Immigration II English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Göç Hukuku II&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-pink-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-pink-400 hover:bg-pink-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-pink-200 border-b-4 border-transparent hover:text-white hover:bg-pink-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-pink-200 border-b-4 border-transparent hover:text-white hover:bg-pink-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-pink-200 border-b-4 border-transparent hover:text-white hover:bg-pink-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Immigration II (Göç II) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-pink-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-pink-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-pink-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-pink-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-pink-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-pink-600 text-white px-4 py-2 rounded hover:bg-pink-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-pink-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-pink-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-pink-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-pink-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-pink-800 text-pink-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Immigration II English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (IMMIGRATION II) ---
        const terms = [
            { id: 1, en: &quot;Quota&quot;, tr: &quot;Kota&quot;, pron: &quot;kota&quot;, desc: &quot;A fixed share of something that a person or group is entitled to receive or is bound to contribute.&quot;, sample: &quot;The government set a quota for new immigrants.&quot;, sampleTr: &quot;Hükümet yeni göçmenler için bir kota belirledi.&quot; },
            { id: 2, en: &quot;Maintain&quot;, tr: &quot;Korumak / Sürdürmek&quot;, pron: &quot;meinteyn&quot;, desc: &quot;Cause or enable (a condition or state of affairs) to continue.&quot;, sample: &quot;You must maintain your legal status.&quot;, sampleTr: &quot;Yasal statünüzü korumalısınız (sürdürmelisiniz).&quot; },
            { id: 3, en: &quot;Allot&quot;, tr: &quot;Bölmek / Pay etmek&quot;, pron: &quot;elot&quot;, desc: &quot;Give or apportion (something) to someone as a share or task.&quot;, sample: &quot;They allot a certain number of visas each year.&quot;, sampleTr: &quot;Her yıl belirli sayıda vize bölerler (ayırırlar).&quot; },
            { id: 4, en: &quot;Sponsor&quot;, tr: &quot;Kefil olmak&quot;, pron: &quot;sponsor&quot;, desc: &quot;Provide funds for (a project or activity) or the person to vouch for an applicant.&quot;, sample: &quot;A family member can sponsor your application.&quot;, sampleTr: &quot;Bir aile üyesi başvurunuza kefil olabilir.&quot; },
            { id: 5, en: &quot;Paperwork&quot;, tr: &quot;Evrak işleri&quot;, pron: &quot;peypırvörk&quot;, desc: &quot;Routine clerical or record-keeping work.&quot;, sample: &quot;The immigration paperwork is extensive.&quot;, sampleTr: &quot;Göçmenlik evrak işleri kapsamlıdır.&quot; },
            { id: 6, en: &quot;Complete&quot;, tr: &quot;Tamamlamak&quot;, pron: &quot;kompliit&quot;, desc: &quot;Finish making or doing.&quot;, sample: &quot;Please complete the form carefully.&quot;, sampleTr: &quot;Lütfen formu dikkatlice tamamlayın.&quot; },
            { id: 7, en: &quot;Certify&quot;, tr: &quot;Belgelemek / Onaylamak&quot;, pron: &quot;sörtifay&quot;, desc: &quot;Attest or confirm in a formal statement.&quot;, sample: &quot;The lawyer must certify the documents.&quot;, sampleTr: &quot;Avukat belgeleri belgelemelidir (onaylamalıdır).&quot; },
            { id: 8, en: &quot;Milestone&quot;, tr: &quot;Kilometre taşı&quot;, pron: &quot;maylston&quot;, desc: &quot;A significant stage or event in the development of something.&quot;, sample: &quot;Getting a green card is a major milestone.&quot;, sampleTr: &quot;Yeşil kart almak önemli bir kilometre taşıdır.&quot; },
            { id: 9, en: &quot;Process&quot;, tr: &quot;İşlem / Süreç&quot;, pron: &quot;proses&quot;, desc: &quot;A series of actions or steps taken in order to achieve a particular end.&quot;, sample: &quot;The application process takes months.&quot;, sampleTr: &quot;Başvuru işlemi (süreci) aylar sürer.&quot; },
            { id: 10, en: &quot;Command&quot;, tr: &quot;Amir olmak / Hakim olmak&quot;, pron: &quot;koment&quot;, desc: &quot;Have authority over; be in charge of (a unit). Also: mastery of a subject.&quot;, sample: &quot;The officer commands the border unit.&quot;, sampleTr: &quot;Memur sınır birliğine amir olur (komuta eder).&quot; },
            { id: 11, en: &quot;Intend&quot;, tr: &quot;Tasarlamak / Niyet etmek&quot;, pron: &quot;intend&quot;, desc: &quot;Have (a course of action) as one&#39;s purpose or objective.&quot;, sample: &quot;Do you intend to stay permanently?&quot;, sampleTr: &quot;Kalıcı olarak kalmayı tasarlıyor musunuz?&quot; },
            { id: 12, en: &quot;Proficient&quot;, tr: &quot;Usta / Yetkin&quot;, pron: &quot;profişınt&quot;, desc: &quot;Competent or skilled in doing or using something.&quot;, sample: &quot;Applicants must be proficient in the language.&quot;, sampleTr: &quot;Başvuru sahipleri dilde usta (yetkin) olmalıdır.&quot; },
            { id: 13, en: &quot;Require&quot;, tr: &quot;İstemek / Gerektirmek&quot;, pron: &quot;rikuayr&quot;, desc: &quot;Need for a particular purpose.&quot;, sample: &quot;The law requires a medical exam.&quot;, sampleTr: &quot;Yasa tıbbi bir muayene ister (gerektirir).&quot; },
            { id: 14, en: &quot;Waive&quot;, tr: &quot;Feragat etmek&quot;, pron: &quot;veyv&quot;, desc: &quot;Refrain from insisting on or using (a right or claim).&quot;, sample: &quot;You may waive your right to a hearing.&quot;, sampleTr: &quot;Duruşma hakkınızdan feragat edebilirsiniz.&quot; },
            { id: 15, en: &quot;Appeal&quot;, tr: &quot;Daha yüksek bir makama başvurmak / Temyiz&quot;, pron: &quot;eppiyıl&quot;, desc: &quot;Make a serious or urgent request, typically to the public.&quot;, sample: &quot;You can appeal the decision within 30 days.&quot;, sampleTr: &quot;Karara 30 gün içinde daha yüksek bir makama başvurarak itiraz edebilirsiniz.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-pink-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-pink-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-pink-200&#39;);
            activeBtn.classList.add(&#39;border-pink-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-pink-100 text-pink-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-pink-700 text-white px-4 py-2 rounded-full hover:bg-pink-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-pink-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-pink-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-pink-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-pink-600 hover:text-pink-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-pink-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-pink-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-pink-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-pink-600 hover:text-pink-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-pink-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-pink-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-pink-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-pink-800&#39;, &#39;border&#39;, &#39;border-pink-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-pink-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-pink-800&#39;, &#39;border&#39;, &#39;border-pink-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-pink-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-pink-800&#39;, &#39;border&#39;, &#39;border-pink-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-pink-100 text-pink-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-pink-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-pink-600 focus:ring-pink-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1829557339554990443/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/immigration-ii-goc-ii.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1829557339554990443'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1829557339554990443'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/immigration-ii-goc-ii.html' title='IMMIGRATION II – GÖÇ II'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-2145622748071831451</id><published>2026-01-19T02:29:00.000-08:00</published><updated>2026-01-19T02:30:03.559-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>INVESTMENT – YATIRIM</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Investment (Yatırım) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f7fee7; } /* Lime-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-lime-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-chart-line text-2xl mr-3 text-lime-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Investment English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Yatırım Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-lime-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-lime-400 hover:bg-lime-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-lime-200 border-b-4 border-transparent hover:text-white hover:bg-lime-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-lime-200 border-b-4 border-transparent hover:text-white hover:bg-lime-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-lime-200 border-b-4 border-transparent hover:text-white hover:bg-lime-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Investment (Yatırım) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-lime-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-lime-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-lime-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-lime-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-lime-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-lime-600 text-white px-4 py-2 rounded hover:bg-lime-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-lime-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-lime-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-lime-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-lime-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-lime-800 text-lime-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Investment English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (INVESTMENT) ---
        const terms = [
            { id: 1, en: &quot;Allege&quot;, tr: &quot;İtham etmek / İddia etmek&quot;, pron: &quot;elıc&quot;, desc: &quot;Claim or assert that someone has done something illegal or wrong, typically without proof.&quot;, sample: &quot;The plaintiff alleges fraud by the company.&quot;, sampleTr: &quot;Davacı şirketi dolandırıcılıkla itham ediyor.&quot; },
            { id: 2, en: &quot;Remedial&quot;, tr: &quot;Usul / İyileştirici / Düzeltici&quot;, pron: &quot;remediyıl&quot;, desc: &quot;Giving or intended as a remedy or cure.&quot;, sample: &quot;The court ordered remedial action.&quot;, sampleTr: &quot;Mahkeme düzeltici (usul) işlem yapılmasını emretti.&quot; },
            { id: 3, en: &quot;Misconduct&quot;, tr: &quot;Kötü yönetim / Suistimal&quot;, pron: &quot;miskondakt&quot;, desc: &quot;Unacceptable or improper behavior.&quot;, sample: &quot;He was fired for financial misconduct.&quot;, sampleTr: &quot;Finansal kötü yönetim (suistimal) nedeniyle kovuldu.&quot; },
            { id: 4, en: &quot;Obey&quot;, tr: &quot;Uymak / İtaat etmek&quot;, pron: &quot;obey&quot;, desc: &quot;Comply with the command, direction, or request of.&quot;, sample: &quot;Investors must obey the regulations.&quot;, sampleTr: &quot;Yatırımcılar düzenlemelere uymalıdır.&quot; },
            { id: 5, en: &quot;Risk&quot;, tr: &quot;Tehlikeye koymak / Risk&quot;, pron: &quot;risk&quot;, desc: &quot;Expose (someone or something) to danger, harm, or loss.&quot;, sample: &quot;Do not risk your capital unnecessarily.&quot;, sampleTr: &quot;Sermayenizi gereksiz yere tehlikeye atmayın.&quot; },
            { id: 6, en: &quot;Punitive&quot;, tr: &quot;Ceza verme / Cezalandırıcı&quot;, pron: &quot;panitiv&quot;, desc: &quot;Inflicting or intended as punishment.&quot;, sample: &quot;The jury awarded punitive damages.&quot;, sampleTr: &quot;Jüri cezalandırıcı tazminata hükmetti.&quot; },
            { id: 7, en: &quot;Bar&quot;, tr: &quot;Yasaklamak / Men etmek&quot;, pron: &quot;bar&quot;, desc: &quot;Prevent or prohibit (someone) from doing something or from going somewhere.&quot;, sample: &quot;The rules bar insider trading.&quot;, sampleTr: &quot;Kurallar içeriden öğrenenlerin ticaretini yasaklar.&quot; },
            { id: 8, en: &quot;Obtain&quot;, tr: &quot;Elde etmek&quot;, pron: &quot;obteyn&quot;, desc: &quot;Get, acquire, or secure (something).&quot;, sample: &quot;You must obtain a license to trade.&quot;, sampleTr: &quot;Ticaret yapmak için bir lisans elde etmelisiniz.&quot; },
            { id: 9, en: &quot;Prosecute&quot;, tr: &quot;Aleyhine dava açmak / Kovuşturmak&quot;, pron: &quot;prosekuut&quot;, desc: &quot;Institute legal proceedings against (a person or organization).&quot;, sample: &quot;The state will prosecute the scammers.&quot;, sampleTr: &quot;Devlet dolandırıcılar aleyhine dava açacak.&quot; },
            { id: 10, en: &quot;Defraud&quot;, tr: &quot;Dolandırmak&quot;, pron: &quot;defraud&quot;, desc: &quot;Illegally obtain money from (someone) by deception.&quot;, sample: &quot;It is illegal to defraud investors.&quot;, sampleTr: &quot;Yatırımcıları dolandırmak yasa dışıdır.&quot; },
            { id: 11, en: &quot;Intervene&quot;, tr: &quot;Araya girmek / Müdahale etmek&quot;, pron: &quot;interviin&quot;, desc: &quot;Come between so as to prevent or alter a result or course of events.&quot;, sample: &quot;The regulators had to intervene in the market.&quot;, sampleTr: &quot;Düzenleyiciler piyasaya araya girmek (müdahale etmek) zorunda kaldı.&quot; },
            { id: 12, en: &quot;Inappropriate&quot;, tr: &quot;Uygun olmayan&quot;, pron: &quot;inapropireyt&quot;, desc: &quot;Not suitable or proper in the circumstances.&quot;, sample: &quot;The advice was inappropriate for his risk profile.&quot;, sampleTr: &quot;Tavsiye onun risk profili için uygun değildi.&quot; },
            { id: 13, en: &quot;Arbitration&quot;, tr: &quot;Uyuşmazlıkları hakem yoluyla halletme / Tahkim&quot;, pron: &quot;arbitreyşın&quot;, desc: &quot;The use of an arbitrator to settle a dispute.&quot;, sample: &quot;The contract requires arbitration for disputes.&quot;, sampleTr: &quot;Sözleşme, uyuşmazlıklar için hakem yoluyla halletmeyi (tahkimi) gerektirir.&quot; },
            { id: 14, en: &quot;Independent&quot;, tr: &quot;Bağımsız&quot;, pron: &quot;indipendınt&quot;, desc: &quot;Free from outside control; not depending on another&#39;s authority.&quot;, sample: &quot;Seek independent financial advice.&quot;, sampleTr: &quot;Bağımsız finansal tavsiye alın.&quot; },
            { id: 15, en: &quot;Substantive&quot;, tr: &quot;Kanuni ilkelerle hareket etmek / Esasa ilişkin&quot;, pron: &quot;sabstentiv&quot;, desc: &quot;Having a firm basis in reality and so important, meaningful, or considerable.&quot;, sample: &quot;Substantive law defines rights and duties.&quot;, sampleTr: &quot;Esasa ilişkin (kanuni ilkelerle hareket eden) hukuk hakları ve görevleri tanımlar.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-lime-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-lime-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-lime-200&#39;);
            activeBtn.classList.add(&#39;border-lime-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-lime-100 text-lime-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-lime-700 text-white px-4 py-2 rounded-full hover:bg-lime-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-lime-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-lime-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-lime-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-lime-600 hover:text-lime-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-lime-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-lime-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-lime-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-lime-600 hover:text-lime-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-lime-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-lime-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-lime-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-lime-800&#39;, &#39;border&#39;, &#39;border-lime-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-lime-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-lime-800&#39;, &#39;border&#39;, &#39;border-lime-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-lime-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-lime-800&#39;, &#39;border&#39;, &#39;border-lime-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-lime-100 text-lime-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-lime-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-lime-600 focus:ring-lime-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/2145622748071831451/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/investment-yatirim.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/2145622748071831451'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/2145622748071831451'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/investment-yatirim.html' title='INVESTMENT – YATIRIM'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1424190756259837193</id><published>2026-01-19T02:24:00.000-08:00</published><updated>2026-01-19T02:30:03.558-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>IMMIGRATION I – GÖÇ I</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Immigration I (Göç I) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #faf5ff; } /* Purple-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-purple-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-plane-arrival text-2xl mr-3 text-purple-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Immigration I English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Göç Hukuku I&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-purple-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-purple-400 hover:bg-purple-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-purple-200 border-b-4 border-transparent hover:text-white hover:bg-purple-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-purple-200 border-b-4 border-transparent hover:text-white hover:bg-purple-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-purple-200 border-b-4 border-transparent hover:text-white hover:bg-purple-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Immigration I (Göç I) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-purple-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-purple-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-purple-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-purple-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-purple-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-purple-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-purple-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-purple-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-purple-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-purple-800 text-purple-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Immigration I English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (IMMIGRATION I) ---
        const terms = [
            { id: 1, en: &quot;Govern&quot;, tr: &quot;Yönetmek&quot;, pron: &quot;gavırn&quot;, desc: &quot;Conduct the policy, actions, and affairs of (a state, organization, or people).&quot;, sample: &quot;Immigration laws govern who can enter the country.&quot;, sampleTr: &quot;Göç yasaları ülkeye kimin girebileceğini yönetir.&quot; },
            { id: 2, en: &quot;Conditions&quot;, tr: &quot;Birbirine bağlı ilkeler, yasalar, kurallar / Koşullar&quot;, pron: &quot;kındişıns&quot;, desc: &quot;The state of affairs that must exist or be brought about before something else is possible.&quot;, sample: &quot;You must satisfy the visa conditions.&quot;, sampleTr: &quot;Vize koşullarını (birbirine bağlı ilkeleri) yerine getirmelisiniz.&quot; },
            { id: 3, en: &quot;Enter&quot;, tr: &quot;Girmek&quot;, pron: &quot;entır&quot;, desc: &quot;Come or go into (a place).&quot;, sample: &quot;He tried to enter the country illegally.&quot;, sampleTr: &quot;Ülkeye yasa dışı yollardan girmeye çalıştı.&quot; },
            { id: 4, en: &quot;Vary&quot;, tr: &quot;Değişmek / Çeşitlilik göstermek&quot;, pron: &quot;veri&quot;, desc: &quot;Differ in size, amount, degree, or nature from something else of the same general class.&quot;, sample: &quot;Requirements vary from country to country.&quot;, sampleTr: &quot;Gereksinimler ülkeden ülkeye değişir.&quot; },
            { id: 5, en: &quot;Depend&quot;, tr: &quot;Bağlı olmak&quot;, pron: &quot;dipend&quot;, desc: &quot;Be controlled or determined by.&quot;, sample: &quot;Your status depends on your employment.&quot;, sampleTr: &quot;Statünüz istihdamınıza bağlıdır.&quot; },
            { id: 6, en: &quot;Apply&quot;, tr: &quot;Talip olmak / Başvurmak&quot;, pron: &quot;eplay&quot;, desc: &quot;Make a formal application or request.&quot;, sample: &quot;You can apply for citizenship after five years.&quot;, sampleTr: &quot;Beş yıl sonra vatandaşlığa talip olabilirsiniz (başvurabilirsiniz).&quot; },
            { id: 7, en: &quot;Cover&quot;, tr: &quot;Kapsamak&quot;, pron: &quot;kavır&quot;, desc: &quot;Include or deal with.&quot;, sample: &quot;The law covers refugees and asylum seekers.&quot;, sampleTr: &quot;Yasa mültecileri ve sığınmacıları kapsar.&quot; },
            { id: 8, en: &quot;Criteria&quot;, tr: &quot;Kriter / Ölçüt&quot;, pron: &quot;kriterya&quot;, desc: &quot;A principle or standard by which something may be judged or decided.&quot;, sample: &quot;She met all the eligibility criteria.&quot;, sampleTr: &quot;Tüm uygunluk kriterlerini karşıladı.&quot; },
            { id: 9, en: &quot;Screen&quot;, tr: &quot;İncelemek / Elemek&quot;, pron: &quot;screen&quot;, desc: &quot;Evaluate or investigate (someone) as part of a methodical survey.&quot;, sample: &quot;Officers screen all incoming passengers.&quot;, sampleTr: &quot;Memurlar gelen tüm yolcuları inceler.&quot; },
            { id: 10, en: &quot;Permanent&quot;, tr: &quot;Kalıcı&quot;, pron: &quot;pörminınt&quot;, desc: &quot;Lasting or intended to last or remain unchanged indefinitely.&quot;, sample: &quot;He has a permanent resident card.&quot;, sampleTr: &quot;Kalıcı oturum kartı var.&quot; },
            { id: 11, en: &quot;Entitle&quot;, tr: &quot;Yetki vermek / Hak kazandırmak&quot;, pron: &quot;entaytıl&quot;, desc: &quot;Give (someone) a legal right or a just claim to receive or do something.&quot;, sample: &quot;This visa entitles you to work here.&quot;, sampleTr: &quot;Bu vize size burada çalışma yetkisi verir.&quot; },
            { id: 12, en: &quot;Hold&quot;, tr: &quot;Tutmak / Sahip olmak&quot;, pron: &quot;hold&quot;, desc: &quot;Possess or occupy.&quot;, sample: &quot;You must hold a valid passport.&quot;, sampleTr: &quot;Geçerli bir pasaporta sahip olmalı (tutmalı) sınız.&quot; },
            { id: 13, en: &quot;Occur&quot;, tr: &quot;Olmak / Meydana gelmek&quot;, pron: &quot;oküur&quot;, desc: &quot;Happen; take place.&quot;, sample: &quot;Illegal border crossings occur frequently.&quot;, sampleTr: &quot;Yasa dışı sınır geçişleri sıkça olur (meydana gelir).&quot; },
            { id: 14, en: &quot;System&quot;, tr: &quot;Sistem&quot;, pron: &quot;sistım&quot;, desc: &quot;A set of principles or procedures according to which something is done.&quot;, sample: &quot;The immigration system is complex.&quot;, sampleTr: &quot;Göçmenlik sistemi karmaşıktır.&quot; },
            { id: 15, en: &quot;Engagement&quot;, tr: &quot;Nişanlılık / Bağlılık&quot;, pron: &quot;engeycmınt&quot;, desc: &quot;A formal agreement to get married.&quot;, sample: &quot;Proof of engagement is required for the fiancé visa.&quot;, sampleTr: &quot;Nişanlı vizesi için nişanlılık kanıtı gereklidir.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-purple-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-purple-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-purple-200&#39;);
            activeBtn.classList.add(&#39;border-purple-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-purple-100 text-purple-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-purple-700 text-white px-4 py-2 rounded-full hover:bg-purple-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-purple-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-purple-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-purple-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-purple-600 hover:text-purple-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-purple-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-purple-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-purple-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-purple-600 hover:text-purple-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-purple-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-purple-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-purple-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-purple-800&#39;, &#39;border&#39;, &#39;border-purple-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-purple-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-purple-800&#39;, &#39;border&#39;, &#39;border-purple-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-purple-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-purple-800&#39;, &#39;border&#39;, &#39;border-purple-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-purple-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-purple-600 focus:ring-purple-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1424190756259837193/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/immigration-i-goc-i.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1424190756259837193'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1424190756259837193'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/immigration-i-goc-i.html' title='IMMIGRATION I – GÖÇ I'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-8978699546594553195</id><published>2026-01-19T02:21:00.000-08:00</published><updated>2026-01-19T02:30:03.559-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>HEALTH – SAĞLIK</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Health (Sağlık) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f0fdf4; } /* Green-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-green-700 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-heart-pulse text-2xl mr-3 text-green-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Health English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Sağlık Hukuku &amp; Terminoloji&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-green-800&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-green-400 hover:bg-green-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-green-200 border-b-4 border-transparent hover:text-white hover:bg-green-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-green-200 border-b-4 border-transparent hover:text-white hover:bg-green-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-green-200 border-b-4 border-transparent hover:text-white hover:bg-green-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Health (Sağlık) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-green-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-green-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-green-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-green-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-green-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-green-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-green-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-green-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-green-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-green-800 text-green-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Health English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (HEALTH) ---
        const terms = [
            { id: 1, en: &quot;Involve&quot;, tr: &quot;Bağlamak / Kapsamak&quot;, pron: &quot;involv&quot;, desc: &quot;To include something as a necessary part or result.&quot;, sample: &quot;The treatment involves surgery.&quot;, sampleTr: &quot;Tedavi ameliyatı kapsıyor (bağlıyor).&quot; },
            { id: 2, en: &quot;Aspect&quot;, tr: &quot;Durum / Yön&quot;, pron: &quot;aspekt&quot;, desc: &quot;A particular part or feature of something.&quot;, sample: &quot;Mental health is an important aspect of wellbeing.&quot;, sampleTr: &quot;Akıl sağlığı, esenliğin önemli bir yönüdür (durumudur).&quot; },
            { id: 3, en: &quot;Assert&quot;, tr: &quot;Israr etmek / İleri sürmek&quot;, pron: &quot;asert&quot;, desc: &quot;State a fact or belief confidently and forcefully.&quot;, sample: &quot;Patients should assert their rights.&quot;, sampleTr: &quot;Hastalar haklarını ileri sürmelidir (ısrar etmelidir).&quot; },
            { id: 4, en: &quot;Treatment&quot;, tr: &quot;Tedavi&quot;, pron: &quot;tretmınt&quot;, desc: &quot;Medical care given to a patient for an illness or injury.&quot;, sample: &quot;He is responding well to the treatment.&quot;, sampleTr: &quot;Tedaviye iyi yanıt veriyor.&quot; },
            { id: 5, en: &quot;Consent&quot;, tr: &quot;Rıza göstermek / Onam&quot;, pron: &quot;konsent&quot;, desc: &quot;Permission for something to happen or agreement to do something.&quot;, sample: &quot;The patient gave written consent for the operation.&quot;, sampleTr: &quot;Hasta ameliyat için yazılı rıza gösterdi (onam verdi).&quot; },
            { id: 6, en: &quot;Explain&quot;, tr: &quot;Açıklamak&quot;, pron: &quot;ekspleyn&quot;, desc: &quot;Make (an idea or situation) clear to someone by describing it in more detail.&quot;, sample: &quot;The doctor will explain the side effects.&quot;, sampleTr: &quot;Doktor yan etkileri açıklayacak.&quot; },
            { id: 7, en: &quot;Prognosis&quot;, tr: &quot;Hastalık seyri tahmini / Prognoz&quot;, pron: &quot;prognosis&quot;, desc: &quot;The likely course of a disease or ailment.&quot;, sample: &quot;The prognosis after the surgery is good.&quot;, sampleTr: &quot;Ameliyat sonrası hastalık seyri tahmini (prognoz) iyi.&quot; },
            { id: 8, en: &quot;Participate&quot;, tr: &quot;Katılmak&quot;, pron: &quot;partisipeyt&quot;, desc: &quot;Take part in an action or endeavor.&quot;, sample: &quot;Patients are encouraged to participate in their care plan.&quot;, sampleTr: &quot;Hastalar bakım planlarına katılmaya teşvik edilir.&quot; },
            { id: 9, en: &quot;Policy&quot;, tr: &quot;Yönetim prensibi / Politika&quot;, pron: &quot;polisi&quot;, desc: &quot;A course or principle of action adopted or proposed by an organization.&quot;, sample: &quot;The hospital has a strict privacy policy.&quot;, sampleTr: &quot;Hastanenin katı bir gizlilik yönetim prensibi (politikası) vardır.&quot; },
            { id: 10, en: &quot;Informed&quot;, tr: &quot;Bilgilendirilmiş&quot;, pron: &quot;informt&quot;, desc: &quot;Having or showing knowledge of a particular subject or situation.&quot;, sample: &quot;Informed consent is essential in medicine.&quot;, sampleTr: &quot;Bilgilendirilmiş onam tıpta esastır.&quot; },
            { id: 11, en: &quot;Routine&quot;, tr: &quot;Rutin / Her zamanki&quot;, pron: &quot;rutin&quot;, desc: &quot;A sequence of actions regularly followed.&quot;, sample: &quot;It was a routine check-up.&quot;, sampleTr: &quot;Rutin bir kontrol muayenesiydi.&quot; },
            { id: 12, en: &quot;Impaired&quot;, tr: &quot;Bozulmuş / Zayıflamış&quot;, pron: &quot;impeyırt&quot;, desc: &quot;Weakened or damaged.&quot;, sample: &quot;His vision was impaired by the accident.&quot;, sampleTr: &quot;Kazadan dolayı görüşü bozulmuştu (zayıflamıştı).&quot; },
            { id: 13, en: &quot;Regardless&quot;, tr: &quot;Dikkate almaksızın&quot;, pron: &quot;rigardlıs&quot;, desc: &quot;Without regard or consideration for.&quot;, sample: &quot;We treat all patients regardless of their ability to pay.&quot;, sampleTr: &quot;Ödeme gücünü dikkate almaksızın tüm hastaları tedavi ediyoruz.&quot; },
            { id: 14, en: &quot;Accredit&quot;, tr: &quot;İtimatname vermek / Akredite etmek&quot;, pron: &quot;akredit&quot;, desc: &quot;Give official authorization or approval to.&quot;, sample: &quot;The board will accredit the new medical school.&quot;, sampleTr: &quot;Kurul yeni tıp fakültesine itimatname verecek (akredite edecek).&quot; },
            { id: 15, en: &quot;Permission&quot;, tr: &quot;Resmi izin&quot;, pron: &quot;pörmişın&quot;, desc: &quot;Consent; authorization.&quot;, sample: &quot;You need permission to access the medical records.&quot;, sampleTr: &quot;Tıbbi kayıtlara erişmek için resmi izne ihtiyacınız var.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-green-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-green-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-green-200&#39;);
            activeBtn.classList.add(&#39;border-green-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-green-100 text-green-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-green-700 text-white px-4 py-2 rounded-full hover:bg-green-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-green-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-green-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-green-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-green-600 hover:text-green-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-green-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-green-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-green-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-green-600 hover:text-green-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-green-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-green-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-green-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-green-800&#39;, &#39;border&#39;, &#39;border-green-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-green-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-green-800&#39;, &#39;border&#39;, &#39;border-green-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-green-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-green-800&#39;, &#39;border&#39;, &#39;border-green-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-green-100 text-green-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-green-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-green-600 focus:ring-green-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/8978699546594553195/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/health-saglik.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8978699546594553195'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8978699546594553195'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/health-saglik.html' title='HEALTH – SAĞLIK'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-16876946768067336</id><published>2026-01-19T02:19:00.000-08:00</published><updated>2026-01-19T02:30:03.558-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>HARASSMENT – TACĐZ</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Harassment (Taciz) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #eff6ff; } /* Blue-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-blue-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-hand-paper text-2xl mr-3 text-blue-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Harassment English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Taciz Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-blue-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-blue-400 hover:bg-blue-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-blue-200 border-b-4 border-transparent hover:text-white hover:bg-blue-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-blue-200 border-b-4 border-transparent hover:text-white hover:bg-blue-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-blue-200 border-b-4 border-transparent hover:text-white hover:bg-blue-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Harassment (Taciz) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-blue-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-blue-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-blue-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-blue-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-blue-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-blue-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-blue-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-blue-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-blue-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-blue-800 text-blue-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Harassment English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (HARASSMENT) ---
        const terms = [
            { id: 1, en: &quot;Conduct&quot;, tr: &quot;Tavır / Davranış&quot;, pron: &quot;kondakt&quot;, desc: &quot;The manner in which a person behaves.&quot;, sample: &quot;The employee&#39;s conduct was unacceptable.&quot;, sampleTr: &quot;Çalışanın tavrı kabul edilemezdi.&quot; },
            { id: 2, en: &quot;Intimidate&quot;, tr: &quot;Korkutmak / Gözdağı vermek&quot;, pron: &quot;intimeyt&quot;, desc: &quot;Frighten or overawe (someone), especially in order to make them do what one wants.&quot;, sample: &quot;Do not try to intimidate the witness.&quot;, sampleTr: &quot;Tanığı korkutmaya (gözdağı vermeye) çalışmayın.&quot; },
            { id: 3, en: &quot;Hostile&quot;, tr: &quot;Düşmanca&quot;, pron: &quot;hostayl&quot;, desc: &quot;Unfriendly; antagonistic.&quot;, sample: &quot;He created a hostile work environment.&quot;, sampleTr: &quot;Düşmanca bir çalışma ortamı yarattı.&quot; },
            { id: 4, en: &quot;Behavior&quot;, tr: &quot;Davranış&quot;, pron: &quot;biheyviır&quot;, desc: &quot;The way in which one acts or conducts oneself.&quot;, sample: &quot;Such behavior will not be tolerated.&quot;, sampleTr: &quot;Böyle bir davranışa müsamaha gösterilmeyecektir.&quot; },
            { id: 5, en: &quot;Assault&quot;, tr: &quot;Saldırı&quot;, pron: &quot;essault&quot;, desc: &quot;Make a physical attack on.&quot;, sample: &quot;He was charged with assault.&quot;, sampleTr: &quot;Saldırı ile suçlandı.&quot; },
            { id: 6, en: &quot;Intolerable&quot;, tr: &quot;Çekilmez / Dayanılmaz&quot;, pron: &quot;intolırıbıl&quot;, desc: &quot;Unable to be endured.&quot;, sample: &quot;The harassment became intolerable.&quot;, sampleTr: &quot;Taciz çekilmez hale geldi.&quot; },
            { id: 7, en: &quot;Prevent&quot;, tr: &quot;Engellemek / Önlemek&quot;, pron: &quot;privent&quot;, desc: &quot;Keep (something) from happening.&quot;, sample: &quot;We must take steps to prevent harassment.&quot;, sampleTr: &quot;Tacizi engellemek için adımlar atmalıyız.&quot; },
            { id: 8, en: &quot;Pervasive&quot;, tr: &quot;Yayılan / Yaygın&quot;, pron: &quot;pörvasiv&quot;, desc: &quot;Spreading widely throughout an area or a group of people.&quot;, sample: &quot;The problem is pervasive in the industry.&quot;, sampleTr: &quot;Sorun sektörde yaygındır (yayılmıştır).&quot; },
            { id: 9, en: &quot;Confrontation&quot;, tr: &quot;Yüzleştirme / Çatışma&quot;, pron: &quot;konfronteyşın&quot;, desc: &quot;A hostile or argumentative meeting or situation between opposing parties.&quot;, sample: &quot;Avoid unnecessary confrontation.&quot;, sampleTr: &quot;Gereksiz yüzleştirmeden (çatışmadan) kaçının.&quot; },
            { id: 10, en: &quot;Determination&quot;, tr: &quot;Mahkeme kararı / Azim&quot;, pron: &quot;determination&quot;, desc: &quot;A judicial decision or sentence.&quot;, sample: &quot;The court made a final determination.&quot;, sampleTr: &quot;Mahkeme nihai kararını verdi.&quot; },
            { id: 11, en: &quot;Disapprove&quot;, tr: &quot;Uygun bulmamak / Onaylamamak&quot;, pron: &quot;disepruv&quot;, desc: &quot;Have or express an unfavorable opinion.&quot;, sample: &quot;They disapprove of his methods.&quot;, sampleTr: &quot;Yöntemlerini uygun bulmuyorlar.&quot; },
            { id: 12, en: &quot;Abate&quot;, tr: &quot;Azaltmak / Dinmek&quot;, pron: &quot;abeyt&quot;, desc: &quot;Become less intense or widespread.&quot;, sample: &quot;The harassment did not abate.&quot;, sampleTr: &quot;Taciz azalmadı (dinmedi).&quot; },
            { id: 13, en: &quot;Responsible&quot;, tr: &quot;Sorumlu&quot;, pron: &quot;rispansibıl&quot;, desc: &quot;Having an obligation to do something, or having control over or care for someone.&quot;, sample: &quot;Who is responsible for this policy?&quot;, sampleTr: &quot;Bu politikadan kim sorumludur?&quot; },
            { id: 14, en: &quot;Ignore&quot;, tr: &quot;Görmezden gelmek&quot;, pron: &quot;ignor&quot;, desc: &quot;Refuse to take notice of or acknowledge.&quot;, sample: &quot;You cannot ignore the complaints.&quot;, sampleTr: &quot;Şikayetleri görmezden gelemezsiniz.&quot; },
            { id: 15, en: &quot;Injury&quot;, tr: &quot;Zarar / Yaralanma&quot;, pron: &quot;incuri&quot;, desc: &quot;Physical or mental harm.&quot;, sample: &quot;She suffered emotional injury.&quot;, sampleTr: &quot;Duygusal zarar gördü.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-blue-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-blue-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-blue-200&#39;);
            activeBtn.classList.add(&#39;border-blue-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-blue-100 text-blue-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-blue-700 text-white px-4 py-2 rounded-full hover:bg-blue-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-blue-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-blue-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-blue-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-blue-600 hover:text-blue-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-blue-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-blue-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-blue-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-blue-600 hover:text-blue-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-blue-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-blue-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-blue-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-blue-800&#39;, &#39;border&#39;, &#39;border-blue-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-blue-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-blue-800&#39;, &#39;border&#39;, &#39;border-blue-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-blue-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-blue-800&#39;, &#39;border&#39;, &#39;border-blue-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-blue-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-blue-600 focus:ring-blue-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/16876946768067336/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/harassment-tacz.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/16876946768067336'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/16876946768067336'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/harassment-tacz.html' title='HARASSMENT – TACĐZ'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-8213067430592074672</id><published>2026-01-19T02:15:00.000-08:00</published><updated>2026-01-19T02:30:03.559-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>ESTATE – MÜLK</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Estate (Mülk) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fafaf9; } /* Stone-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-stone-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-house-chimney text-2xl mr-3 text-stone-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Estate English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Mülk Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-stone-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-stone-400 hover:bg-stone-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-stone-200 border-b-4 border-transparent hover:text-white hover:bg-stone-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-stone-200 border-b-4 border-transparent hover:text-white hover:bg-stone-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-stone-200 border-b-4 border-transparent hover:text-white hover:bg-stone-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Estate (Mülk) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-stone-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-stone-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-stone-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-stone-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-stone-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-stone-600 text-white px-4 py-2 rounded hover:bg-stone-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-stone-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-stone-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-stone-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-stone-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-stone-800 text-stone-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Estate English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (ESTATE) ---
        const terms = [
            { id: 1, en: &quot;Own&quot;, tr: &quot;Sahip olmak&quot;, pron: &quot;ovn&quot;, desc: &quot;Have (something) as one&#39;s own.&quot;, sample: &quot;They own a large estate in the country.&quot;, sampleTr: &quot;Ülkede büyük bir mülke sahipler.&quot; },
            { id: 2, en: &quot;Encompass&quot;, tr: &quot;İçermek / Kapsamak&quot;, pron: &quot;enkompes&quot;, desc: &quot;Surround and have or hold within; include comprehensively.&quot;, sample: &quot;The estate encompasses three acres of land.&quot;, sampleTr: &quot;Mülk üç dönümlük bir alanı içerir (kapsar).&quot; },
            { id: 3, en: &quot;Method&quot;, tr: &quot;Yöntem&quot;, pron: &quot;metıd&quot;, desc: &quot;A particular form of procedure for accomplishing or approaching something.&quot;, sample: &quot;What is the best method for estate planning?&quot;, sampleTr: &quot;Mülk planlaması için en iyi yöntem nedir?&quot; },
            { id: 4, en: &quot;Living will&quot;, tr: &quot;Yaşayan vasiyet&quot;, pron: &quot;living vil&quot;, desc: &quot;A written statement detailing a person&#39;s desires regarding their medical treatment in circumstances in which they are no longer able to express informed consent.&quot;, sample: &quot;He signed a living will to refuse life support.&quot;, sampleTr: &quot;Yaşam destek ünitesini reddetmek için bir yaşayan vasiyet imzaladı.&quot; },
            { id: 5, en: &quot;Reduce&quot;, tr: &quot;Azaltmak&quot;, pron: &quot;redus&quot;, desc: &quot;Make smaller or less in amount, degree, or size.&quot;, sample: &quot;Proper planning can reduce estate taxes.&quot;, sampleTr: &quot;Doğru planlama emlak vergilerini azaltabilir.&quot; },
            { id: 6, en: &quot;Expense&quot;, tr: &quot;Masraf / Gider&quot;, pron: &quot;ekspens&quot;, desc: &quot;The cost required for something; the money spent on something.&quot;, sample: &quot;Funeral expenses are paid from the estate.&quot;, sampleTr: &quot;Cenaze masrafları tereke (mülk) fonundan ödenir.&quot; },
            { id: 7, en: &quot;Outright&quot;, tr: &quot;Tamamen / Doğrudan&quot;, pron: &quot;autrayt&quot;, desc: &quot;Wholly and completely.&quot;, sample: &quot;She inherited the property outright.&quot;, sampleTr: &quot;Mülkü tamamen miras aldı.&quot; },
            { id: 8, en: &quot;Convey&quot;, tr: &quot;Devretmek / İletmek&quot;, pron: &quot;konvey&quot;, desc: &quot;Transport or carry to a place; transfer the title to (property).&quot;, sample: &quot;The deed conveys the title to the buyer.&quot;, sampleTr: &quot;Tapu senedi, mülkiyet hakkını alıcıya devreder.&quot; },
            { id: 9, en: &quot;Ramification&quot;, tr: &quot;Sonuç / Dallanıp budaklanma&quot;, pron: &quot;remifikeyşın&quot;, desc: &quot;A consequence of an action or event, especially when complex or unwelcome.&quot;, sample: &quot;Consider the tax ramifications of this gift.&quot;, sampleTr: &quot;Bu hediyenin vergi sonuçlarını (etkilerini) düşünün.&quot; },
            { id: 10, en: &quot;Power of attorney&quot;, tr: &quot;Vekaletname&quot;, pron: &quot;pavır of atorni&quot;, desc: &quot;The authority to act for another person in specified or all legal or financial matters.&quot;, sample: &quot;He gave his son power of attorney.&quot;, sampleTr: &quot;Oğluna vekaletname verdi.&quot; },
            { id: 11, en: &quot;Inventory&quot;, tr: &quot;Mal dökümü / Envanter&quot;, pron: &quot;inventori&quot;, desc: &quot;A complete list of items such as property, goods in stock, or the contents of a building.&quot;, sample: &quot;The executor must take an inventory of the assets.&quot;, sampleTr: &quot;Vasiyeti yerine getiren kişi varlıkların bir mal dökümünü (envanterini) çıkarmalıdır.&quot; },
            { id: 12, en: &quot;Goal&quot;, tr: &quot;Amaç / Hedef&quot;, pron: &quot;gool&quot;, desc: &quot;The object of a person&#39;s ambition or effort.&quot;, sample: &quot;The goal is to preserve wealth for the heirs.&quot;, sampleTr: &quot;Amaç, serveti mirasçılar için korumaktır.&quot; },
            { id: 13, en: &quot;Preserve&quot;, tr: &quot;Korumak / Muhafaza etmek&quot;, pron: &quot;prisörv&quot;, desc: &quot;Maintain (something) in its original or existing state.&quot;, sample: &quot;We want to preserve the family home.&quot;, sampleTr: &quot;Aile evini korumak (muhafaza etmek) istiyoruz.&quot; },
            { id: 14, en: &quot;Adequate&quot;, tr: &quot;Yeterli&quot;, pron: &quot;adekueyt&quot;, desc: &quot;Satisfactory or acceptable in quality or quantity.&quot;, sample: &quot;Ensure there is adequate insurance coverage.&quot;, sampleTr: &quot;Yeterli sigorta kapsamı olduğundan emin olun.&quot; },
            { id: 15, en: &quot;Cornerstone&quot;, tr: &quot;Temel taşı&quot;, pron: &quot;kornırston&quot;, desc: &quot;An important quality or feature on which a particular thing depends or is based.&quot;, sample: &quot;Trust is the cornerstone of our relationship.&quot;, sampleTr: &quot;Güven, ilişkimizin temel taşıdır.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-stone-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-stone-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-stone-200&#39;);
            activeBtn.classList.add(&#39;border-stone-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-stone-100 text-stone-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-stone-700 text-white px-4 py-2 rounded-full hover:bg-stone-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-stone-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-stone-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-stone-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-stone-600 hover:text-stone-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-stone-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-stone-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-stone-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-stone-600 hover:text-stone-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-stone-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-stone-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-stone-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-stone-800&#39;, &#39;border&#39;, &#39;border-stone-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-stone-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-stone-800&#39;, &#39;border&#39;, &#39;border-stone-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-stone-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-stone-800&#39;, &#39;border&#39;, &#39;border-stone-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-stone-100 text-stone-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-stone-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-stone-600 focus:ring-stone-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/8213067430592074672/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/estate-mulk.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8213067430592074672'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8213067430592074672'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/estate-mulk.html' title='ESTATE – MÜLK'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-5834504284250617133</id><published>2026-01-19T02:12:00.000-08:00</published><updated>2026-01-19T02:13:11.830-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>EMPLOYMENT – İŞE ALIM</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Employment (İşe Alım) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f0f9ff; } /* Sky-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-sky-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-user-tie text-2xl mr-3 text-sky-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Employment English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;İşe Alım İngilizcesi&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-sky-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-sky-400 hover:bg-sky-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-sky-200 border-b-4 border-transparent hover:text-white hover:bg-sky-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-sky-200 border-b-4 border-transparent hover:text-white hover:bg-sky-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-sky-200 border-b-4 border-transparent hover:text-white hover:bg-sky-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Employment (İşe Alım) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-sky-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-sky-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-sky-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-sky-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-sky-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-sky-600 text-white px-4 py-2 rounded hover:bg-sky-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-sky-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-sky-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-sky-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-sky-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-sky-800 text-sky-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Employment English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (EMPLOYMENT) ---
        const terms = [
            { id: 1, en: &quot;Pass&quot;, tr: &quot;Hüküm vermek / Geçmek&quot;, pron: &quot;pes&quot;, desc: &quot;To pronounce or deliver (a judgment or sentence).&quot;, sample: &quot;The committee will pass judgment on the application.&quot;, sampleTr: &quot;Komite başvuru hakkında hüküm verecek.&quot; },
            { id: 2, en: &quot;Protect&quot;, tr: &quot;Korumak&quot;, pron: &quot;protekt&quot;, desc: &quot;Keep safe from harm or injury.&quot;, sample: &quot;Labor laws protect employees&#39; rights.&quot;, sampleTr: &quot;İş kanunları çalışanların haklarını korur.&quot; },
            { id: 3, en: &quot;Right&quot;, tr: &quot;Ehil / Hak / Doğru&quot;, pron: &quot;rayt&quot;, desc: &quot;Morally good, justified, or acceptable; or suitable/competent.&quot;, sample: &quot;We need to find the right person for the job.&quot;, sampleTr: &quot;İş için ehil (doğru) kişiyi bulmalıyız.&quot; },
            { id: 4, en: &quot;Hire&quot;, tr: &quot;İşe almak&quot;, pron: &quot;hayr&quot;, desc: &quot;Employ (someone) for wages.&quot;, sample: &quot;The company plans to hire five new developers.&quot;, sampleTr: &quot;Şirket beş yeni geliştiriciyi işe almayı planlıyor.&quot; },
            { id: 5, en: &quot;Minimum&quot;, tr: &quot;Minimum / Asgari&quot;, pron: &quot;minimum&quot;, desc: &quot;The least or smallest amount or quantity possible.&quot;, sample: &quot;The job pays minimum wage.&quot;, sampleTr: &quot;İş asgari (minimum) ücret ödüyor.&quot; },
            { id: 6, en: &quot;Interview&quot;, tr: &quot;Karşılıklı konuşma / Mülakat&quot;, pron: &quot;interviuv&quot;, desc: &quot;A meeting of people face to face, especially for consultation.&quot;, sample: &quot;The job interview lasted one hour.&quot;, sampleTr: &quot;İş için karşılıklı konuşma (mülakat) bir saat sürdü.&quot; },
            { id: 7, en: &quot;Prospective&quot;, tr: &quot;Beklenen / Müstakbel&quot;, pron: &quot;prospektiv&quot;, desc: &quot;Expected or expecting to be something in the future.&quot;, sample: &quot;We screened all prospective employees.&quot;, sampleTr: &quot;Tüm beklenen (aday) çalışanları inceledik.&quot; },
            { id: 8, en: &quot;Practice&quot;, tr: &quot;Alışkanlık / Uygulama&quot;, pron: &quot;prektis&quot;, desc: &quot;The customary, habitual, or expected procedure.&quot;, sample: &quot;It is standard practice to check references.&quot;, sampleTr: &quot;Referansları kontrol etmek standart bir alışkanlıktır (uygulamadır).&quot; },
            { id: 9, en: &quot;Qualification&quot;, tr: &quot;Nitelik&quot;, pron: &quot;kualifikeyşın&quot;, desc: &quot;A quality or accomplishment that makes someone suitable for a particular job.&quot;, sample: &quot;A degree is a necessary qualification.&quot;, sampleTr: &quot;Diploma gerekli bir niteliktir.&quot; },
            { id: 10, en: &quot;Conduct&quot;, tr: &quot;Yürütmek / Yönetmek&quot;, pron: &quot;kondakt&quot;, desc: &quot;Organize and carry out.&quot;, sample: &quot;They conduct background checks on all staff.&quot;, sampleTr: &quot;Tüm personel üzerinde geçmiş kontrolü yürütürler.&quot; },
            { id: 11, en: &quot;Provide&quot;, tr: &quot;Sağlamak&quot;, pron: &quot;provayd&quot;, desc: &quot;Make available for use; supply.&quot;, sample: &quot;The employer must provide safety equipment.&quot;, sampleTr: &quot;İşveren güvenlik ekipmanı sağlamalıdır.&quot; },
            { id: 12, en: &quot;Strict&quot;, tr: &quot;Katı / Sıkı&quot;, pron: &quot;strikt&quot;, desc: &quot;Demanding that rules concerning behavior are obeyed and observed.&quot;, sample: &quot;The company has strict policies against harassment.&quot;, sampleTr: &quot;Şirketin tacize karşı katı politikaları vardır.&quot; },
            { id: 13, en: &quot;Check&quot;, tr: &quot;Kontrol etmek&quot;, pron: &quot;çek&quot;, desc: &quot;Examine (something) in order to determine its accuracy, quality, or condition.&quot;, sample: &quot;Please check the applicant&#39;s history.&quot;, sampleTr: &quot;Lütfen başvuranın geçmişini kontrol edin.&quot; },
            { id: 14, en: &quot;Handle&quot;, tr: &quot;Üstesinden gelmek / Ele almak&quot;, pron: &quot;hendıl&quot;, desc: &quot;Manage (a situation or problem).&quot;, sample: &quot;She can handle difficult situations well.&quot;, sampleTr: &quot;Zor durumların üstesinden iyi gelebilir.&quot; },
            { id: 15, en: &quot;Discriminate against&quot;, tr: &quot;Önyargılı davranmak / Ayrımcılık yapmak&quot;, pron: &quot;diskrimineyt egeynst&quot;, desc: &quot;Make an unjust or prejudicial distinction in the treatment of different categories of people.&quot;, sample: &quot;It is illegal to discriminate against candidates based on age.&quot;, sampleTr: &quot;Adaylara karşı yaşa dayalı önyargılı davranmak (ayrımcılık yapmak) yasa dışıdır.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-sky-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-sky-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-sky-200&#39;);
            activeBtn.classList.add(&#39;border-sky-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-sky-100 text-sky-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-sky-700 text-white px-4 py-2 rounded-full hover:bg-sky-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-sky-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-sky-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-sky-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-sky-600 hover:text-sky-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-sky-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-sky-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-sky-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-sky-600 hover:text-sky-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-sky-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-sky-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-sky-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-sky-800&#39;, &#39;border&#39;, &#39;border-sky-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-sky-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-sky-800&#39;, &#39;border&#39;, &#39;border-sky-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-sky-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-sky-800&#39;, &#39;border&#39;, &#39;border-sky-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-sky-100 text-sky-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-sky-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-sky-600 focus:ring-sky-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/5834504284250617133/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/employment-ise-alim.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5834504284250617133'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/5834504284250617133'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/employment-ise-alim.html' title='EMPLOYMENT – İŞE ALIM'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-4985969095568034387</id><published>2026-01-19T02:10:00.000-08:00</published><updated>2026-01-19T02:13:11.830-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>DIVORCE - BOŞANMA</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Divorce (Boşanma) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fdf4ff; } /* Fuchsia-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-fuchsia-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-heart-crack text-2xl mr-3 text-fuchsia-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Divorce English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Boşanma Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-fuchsia-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-fuchsia-400 hover:bg-fuchsia-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-fuchsia-200 border-b-4 border-transparent hover:text-white hover:bg-fuchsia-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-fuchsia-200 border-b-4 border-transparent hover:text-white hover:bg-fuchsia-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-fuchsia-200 border-b-4 border-transparent hover:text-white hover:bg-fuchsia-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Divorce (Boşanma) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-fuchsia-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-fuchsia-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-fuchsia-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-fuchsia-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-fuchsia-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-fuchsia-600 text-white px-4 py-2 rounded hover:bg-fuchsia-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-pink-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-pink-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-fuchsia-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-fuchsia-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-fuchsia-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-fuchsia-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-fuchsia-800 text-fuchsia-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Divorce English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (DIVORCE) ---
        const terms = [
            { id: 1, en: &quot;Swear&quot;, tr: &quot;Yemin etmek&quot;, pron: &quot;sviyır&quot;, desc: &quot;To make a solemn statement or promise.&quot;, sample: &quot;Witnesses must swear to tell the truth in court.&quot;, sampleTr: &quot;Tanıklar mahkemede doğruyu söyleyeceklerine yemin etmelidir.&quot; },
            { id: 2, en: &quot;Grounds&quot;, tr: &quot;Gerekçe&quot;, pron: &quot;graunds&quot;, desc: &quot;Factors forming a basis for action or the justification for a belief.&quot;, sample: &quot;Adultery is one of the grounds for divorce.&quot;, sampleTr: &quot;Zina, boşanma gerekçelerinden biridir.&quot; },
            { id: 3, en: &quot;Serve&quot;, tr: &quot;Tebliğ etmek / Hizmet etmek&quot;, pron: &quot;sörv&quot;, desc: &quot;To deliver a legal document to someone.&quot;, sample: &quot;You must serve the divorce papers to your spouse.&quot;, sampleTr: &quot;Boşanma evraklarını eşinize tebliğ etmelisiniz.&quot; },
            { id: 4, en: &quot;Answer&quot;, tr: &quot;Cevap vermek&quot;, pron: &quot;ansır&quot;, desc: &quot;A written pleading filed by a defendant to respond to a complaint.&quot;, sample: &quot;The defendant has 30 days to file an answer.&quot;, sampleTr: &quot;Davalının bir cevap vermek (dosyalamak) için 30 günü vardır.&quot; },
            { id: 5, en: &quot;Issue&quot;, tr: &quot;Dağıtmak / Çıkarmak (Emir vb.)&quot;, pron: &quot;işşu&quot;, desc: &quot;To supply or distribute something; to formally send out.&quot;, sample: &quot;The judge will issue a restraining order.&quot;, sampleTr: &quot;Yargıç bir uzaklaştırma emri çıkaracak (dağıtacak).&quot; },
            { id: 6, en: &quot;Decree&quot;, tr: &quot;Mahkeme emri / Karar&quot;, pron: &quot;dikrii&quot;, desc: &quot;An official order issued by a legal authority.&quot;, sample: &quot;The court issued a final decree of divorce.&quot;, sampleTr: &quot;Mahkeme nihai bir boşanma emri verdi.&quot; },
            { id: 7, en: &quot;Circumstances&quot;, tr: &quot;Durumlar / Koşullar&quot;, pron: &quot;sörkımstensis&quot;, desc: &quot;A fact or condition connected with or relevant to an event or action.&quot;, sample: &quot;Custody depends on the circumstances of the parents.&quot;, sampleTr: &quot;Velayet, ebeveynlerin durumlarına (koşullarına) bağlıdır.&quot; },
            { id: 8, en: &quot;Irreconcilable&quot;, tr: &quot;Uzlaştırılamaz&quot;, pron: &quot;irrekonsaylıbıl&quot;, desc: &quot;Incapable of being brought into harmony or adjustment.&quot;, sample: &quot;They cited irreconcilable differences for the divorce.&quot;, sampleTr: &quot;Boşanma için uzlaştırılamaz farklılıkları gerekçe gösterdiler.&quot; },
            { id: 9, en: &quot;Jurisdiction&quot;, tr: &quot;Yargı alanı / Yetkisi&quot;, pron: &quot;curisdikşın&quot;, desc: &quot;The official power to make legal decisions and judgments.&quot;, sample: &quot;This court has jurisdiction over the case.&quot;, sampleTr: &quot;Bu mahkemenin dava üzerinde yargı yetkisi (alanı) vardır.&quot; },
            { id: 10, en: &quot;Reconcile&quot;, tr: &quot;Uzlaştırmak / Barışmak&quot;, pron: &quot;rikonsayl&quot;, desc: &quot;Restore friendly relations between.&quot;, sample: &quot;The couple tried to reconcile but failed.&quot;, sampleTr: &quot;Çift uzlaşmaya (barışmaya) çalıştı ama başaramadı.&quot; },
            { id: 11, en: &quot;Resume&quot;, tr: &quot;Yeniden başlamak / Devam etmek&quot;, pron: &quot;resum&quot;, desc: &quot;Begin to do or pursue (something) again after a pause or interruption.&quot;, sample: &quot;She wants to resume using her maiden name.&quot;, sampleTr: &quot;Kızlık soyadını kullanmaya yeniden başlamak istiyor.&quot; },
            { id: 12, en: &quot;Satisfy&quot;, tr: &quot;Ikna etmek / Karşılamak&quot;, pron: &quot;satisfay&quot;, desc: &quot;Meet the expectations, needs, or desires of (someone).&quot;, sample: &quot;You must satisfy the court that the marriage is broken.&quot;, sampleTr: &quot;Evliliğin bittiği konusunda mahkemeyi ikna etmelisiniz.&quot; },
            { id: 13, en: &quot;Contrary&quot;, tr: &quot;Zıt / Aykırı&quot;, pron: &quot;kontrari&quot;, desc: &quot;Opposite in nature, direction, or meaning.&quot;, sample: &quot;This action is contrary to the best interests of the child.&quot;, sampleTr: &quot;Bu eylem çocuğun üstün yararına zıttır (aykırıdır).&quot; },
            { id: 14, en: &quot;Public interest&quot;, tr: &quot;Kamu yararı&quot;, pron: &quot;pablik interest&quot;, desc: &quot;The welfare or well-being of the general public.&quot;, sample: &quot;The decision was made in the public interest.&quot;, sampleTr: &quot;Karar kamu yararı gözetilerek verildi.&quot; },
            { id: 15, en: &quot;Cohabitate&quot;, tr: &quot;Birlikte yaşamak&quot;, pron: &quot;kohabiteyt&quot;, desc: &quot;Live together and have a sexual relationship without being married.&quot;, sample: &quot;They continued to cohabitate after the separation.&quot;, sampleTr: &quot;Ayrılıktan sonra birlikte yaşamaya devam ettiler.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-fuchsia-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-fuchsia-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-fuchsia-200&#39;);
            activeBtn.classList.add(&#39;border-fuchsia-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-fuchsia-100 text-fuchsia-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-fuchsia-700 text-white px-4 py-2 rounded-full hover:bg-fuchsia-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-fuchsia-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-fuchsia-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-fuchsia-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-fuchsia-600 hover:text-fuchsia-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-fuchsia-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-fuchsia-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-fuchsia-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-fuchsia-600 hover:text-fuchsia-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-fuchsia-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-fuchsia-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-fuchsia-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-fuchsia-800&#39;, &#39;border&#39;, &#39;border-fuchsia-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-fuchsia-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-fuchsia-800&#39;, &#39;border&#39;, &#39;border-fuchsia-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-fuchsia-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-fuchsia-800&#39;, &#39;border&#39;, &#39;border-fuchsia-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-fuchsia-100 text-fuchsia-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-fuchsia-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-fuchsia-600 focus:ring-fuchsia-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/4985969095568034387/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/divorce-bosanma.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/4985969095568034387'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/4985969095568034387'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/divorce-bosanma.html' title='DIVORCE - BOŞANMA'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1551092175007698348</id><published>2026-01-19T02:08:00.000-08:00</published><updated>2026-01-19T02:13:11.830-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>DEBT – BORÇ</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Debt (Borç) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #ecfeff; } /* Cyan-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-cyan-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-file-invoice-dollar text-2xl mr-3 text-cyan-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Debt English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Borç Hukuku&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-cyan-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-cyan-400 hover:bg-cyan-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-cyan-200 border-b-4 border-transparent hover:text-white hover:bg-cyan-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-cyan-200 border-b-4 border-transparent hover:text-white hover:bg-cyan-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-cyan-200 border-b-4 border-transparent hover:text-white hover:bg-cyan-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Debt (Borç) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-cyan-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-cyan-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-cyan-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-cyan-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-cyan-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-cyan-600 text-white px-4 py-2 rounded hover:bg-cyan-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-cyan-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-cyan-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-cyan-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-cyan-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-cyan-800 text-cyan-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Debt English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (DEBT) ---
        const terms = [
            { id: 1, en: &quot;Creditor&quot;, tr: &quot;Alacaklı&quot;, pron: &quot;kreditor&quot;, desc: &quot;A person or company to whom money is owed.&quot;, sample: &quot;The creditor demanded immediate payment.&quot;, sampleTr: &quot;Alacaklı derhal ödeme talep etti.&quot; },
            { id: 2, en: &quot;Impose&quot;, tr: &quot;Zorla yüklemek&quot;, pron: &quot;impos&quot;, desc: &quot;Force (something welcome or unfamiliar) to be accepted or put in place.&quot;, sample: &quot;The bank may impose a penalty for late payment.&quot;, sampleTr: &quot;Banka geç ödeme için bir ceza zorla yükleyebilir (uygulayabilir).&quot; },
            { id: 3, en: &quot;Standard&quot;, tr: &quot;Standart&quot;, pron: &quot;stendırt&quot;, desc: &quot;A level of quality or attainment.&quot;, sample: &quot;This is a standard procedure in banking.&quot;, sampleTr: &quot;Bu, bankacılıkta standart bir prosedürdür.&quot; },
            { id: 4, en: &quot;Restrict&quot;, tr: &quot;Sınırlamak&quot;, pron: &quot;ristrikt&quot;, desc: &quot;Put a limit on; keep under control.&quot;, sample: &quot;The loan terms restrict the sale of assets.&quot;, sampleTr: &quot;Kredi şartları varlıkların satışını sınırlar.&quot; },
            { id: 5, en: &quot;Resolve&quot;, tr: &quot;Çözmek&quot;, pron: &quot;risolv&quot;, desc: &quot;Settle or find a solution to (a problem, dispute, or contentious matter).&quot;, sample: &quot;We need to resolve this debt issue quickly.&quot;, sampleTr: &quot;Bu borç sorununu hızlıca çözmemiz gerekiyor.&quot; },
            { id: 6, en: &quot;Dispute&quot;, tr: &quot;Anlaşmazlık&quot;, pron: &quot;disput&quot;, desc: &quot;A disagreement, argument, or debate.&quot;, sample: &quot;There is a dispute over the interest rate.&quot;, sampleTr: &quot;Faiz oranı üzerinde bir anlaşmazlık var.&quot; },
            { id: 7, en: &quot;Settle&quot;, tr: &quot;Düzenlemek / Halletmek&quot;, pron: &quot;setıl&quot;, desc: &quot;Pay (a debt or account).&quot;, sample: &quot;He agreed to settle the debt out of court.&quot;, sampleTr: &quot;Borcu mahkeme dışında düzenlemeyi (halletmeyi) kabul etti.&quot; },
            { id: 8, en: &quot;Sue&quot;, tr: &quot;Dava etmek&quot;, pron: &quot;suu&quot;, desc: &quot;Institute legal proceedings against (a person or institution).&quot;, sample: &quot;The creditor threatened to sue the debtor.&quot;, sampleTr: &quot;Alacaklı, borçluyu dava etmekle tehdit etti.&quot; },
            { id: 9, en: &quot;Garnish&quot;, tr: &quot;Haczetmek (Maaş vb.)&quot;, pron: &quot;garniş&quot;, desc: &quot;Seize (money, especially part of a person&#39;s salary) to settle a debt or claim.&quot;, sample: &quot;The court allowed them to garnish his wages.&quot;, sampleTr: &quot;Mahkeme maaşını haczetmelerine izin verdi.&quot; },
            { id: 10, en: &quot;Recover&quot;, tr: &quot;Geri almak&quot;, pron: &quot;rikavır&quot;, desc: &quot;Regain possession of (something stolen or lost).&quot;, sample: &quot;They are trying to recover the outstanding debts.&quot;, sampleTr: &quot;Ödenmemiş borçları geri almaya çalışıyorlar.&quot; },
            { id: 11, en: &quot;Limit&quot;, tr: &quot;Sınırlamak / Sınır&quot;, pron: &quot;limit&quot;, desc: &quot;A point or level beyond which something does not or may not extend or pass.&quot;, sample: &quot;There is a strict limit on credit card spending.&quot;, sampleTr: &quot;Kredi kartı harcamalarında katı bir sınır (sınırlama) vardır.&quot; },
            { id: 12, en: &quot;Seize&quot;, tr: &quot;Ele geçirmek / El koymak&quot;, pron: &quot;sayz&quot;, desc: &quot;Take forcible possession of.&quot;, sample: &quot;Authorities can seize property to pay taxes.&quot;, sampleTr: &quot;Yetkililer vergileri ödemek için mülkiyeti ele geçirebilir (el koyabilir).&quot; },
            { id: 13, en: &quot;Property&quot;, tr: &quot;Mülkiyet&quot;, pron: &quot;propırti&quot;, desc: &quot;A thing or things belonging to someone.&quot;, sample: &quot;The debtor&#39;s property was sold at auction.&quot;, sampleTr: &quot;Borçlunun mülkiyeti açık artırmada satıldı.&quot; },
            { id: 14, en: &quot;Proceeds&quot;, tr: &quot;Hasılat&quot;, pron: &quot;prosiids&quot;, desc: &quot;Money obtained from an event or activity.&quot;, sample: &quot;The proceeds from the sale paid off the loan.&quot;, sampleTr: &quot;Satıştan elde edilen hasılat krediyi ödedi.&quot; },
            { id: 15, en: &quot;Debt&quot;, tr: &quot;Borç&quot;, pron: &quot;debt&quot;, desc: &quot;Something, typically money, that is owed or due.&quot;, sample: &quot;He is struggling to clear his heavy debt.&quot;, sampleTr: &quot;Ağır borcunu temizlemek için mücadele ediyor.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-cyan-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-cyan-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-cyan-200&#39;);
            activeBtn.classList.add(&#39;border-cyan-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-cyan-100 text-cyan-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-cyan-700 text-white px-4 py-2 rounded-full hover:bg-cyan-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-cyan-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-cyan-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-cyan-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-cyan-600 hover:text-cyan-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-cyan-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-cyan-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-cyan-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-cyan-600 hover:text-cyan-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-cyan-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-cyan-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-cyan-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-cyan-800&#39;, &#39;border&#39;, &#39;border-cyan-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-cyan-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-cyan-800&#39;, &#39;border&#39;, &#39;border-cyan-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-cyan-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-cyan-800&#39;, &#39;border&#39;, &#39;border-cyan-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-cyan-100 text-cyan-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-cyan-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-cyan-600 focus:ring-cyan-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1551092175007698348/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/debt-borc.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1551092175007698348'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1551092175007698348'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/debt-borc.html' title='DEBT – BORÇ'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-6946198264571784880</id><published>2026-01-19T02:06:54.907-08:00</published><updated>2026-01-19T02:06:54.907-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>CUSTODY - YAZILI ANLAŞMA TAHTINDA MÜŞTERİNİN  DEĞERLİ EŞYALARINI MUHAFAZA ETME</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Custody (Muhafaza/Velayet) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f5f3ff; } /* Violet-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-violet-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-child-reaching text-2xl mr-3 text-violet-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Custody English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Muhafaza / Velayet&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-violet-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-violet-400 hover:bg-violet-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-violet-200 border-b-4 border-transparent hover:text-white hover:bg-violet-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-violet-200 border-b-4 border-transparent hover:text-white hover:bg-violet-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-violet-200 border-b-4 border-transparent hover:text-white hover:bg-violet-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Custody (Muhafaza/Velayet) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-violet-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-violet-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-violet-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-violet-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-violet-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-violet-600 text-white px-4 py-2 rounded hover:bg-violet-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-pink-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-pink-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-violet-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-violet-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-violet-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-violet-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-violet-800 text-violet-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Custody English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (CUSTODY) ---
        const terms = [
            { id: 1, en: &quot;Custom&quot;, tr: &quot;Gelenek&quot;, pron: &quot;kastım&quot;, desc: &quot;A traditional and widely accepted way of behaving or doing something.&quot;, sample: &quot;Local custom determines the property rights.&quot;, sampleTr: &quot;Yerel gelenek mülkiyet haklarını belirler.&quot; },
            { id: 2, en: &quot;Joint&quot;, tr: &quot;Ortak&quot;, pron: &quot;coint&quot;, desc: &quot;Shared, held, or made by two or more people.&quot;, sample: &quot;They have joint custody of the children.&quot;, sampleTr: &quot;Çocukların ortak velayetine (muhafazasına) sahipler.&quot; },
            { id: 3, en: &quot;Award&quot;, tr: &quot;Vermek / Hükmetmek&quot;, pron: &quot;avırd&quot;, desc: &quot;To give or order the giving of (something) as an official payment, compensation, or prize.&quot;, sample: &quot;The court awarded custody to the mother.&quot;, sampleTr: &quot;Mahkeme velayeti anneye verdi (hükmetti).&quot; },
            { id: 4, en: &quot;Reluctant&quot;, tr: &quot;İsteksiz&quot;, pron: &quot;rilaktınt&quot;, desc: &quot;Unwilling and hesitant.&quot;, sample: &quot;The witness was reluctant to testify.&quot;, sampleTr: &quot;Tanık ifade vermeye isteksizdi.&quot; },
            { id: 5, en: &quot;Suitable&quot;, tr: &quot;Kalifiye / Uygun&quot;, pron: &quot;sutıbıl&quot;, desc: &quot;Right or appropriate for a particular person, purpose, or situation.&quot;, sample: &quot;The home environment is suitable for the child.&quot;, sampleTr: &quot;Ev ortamı çocuk için uygundur (kalifiyedir).&quot; },
            { id: 6, en: &quot;Foster care&quot;, tr: &quot;Koruma / Koruyucu Aile Bakımı&quot;, pron: &quot;fostır keyr&quot;, desc: &quot;The temporary placement of a child in a household.&quot;, sample: &quot;The child was placed in foster care.&quot;, sampleTr: &quot;Çocuk koruma altına (koruyucu aile bakımına) alındı.&quot; },
            { id: 7, en: &quot;Favor&quot;, tr: &quot;Tercih etmek / Lehine olmak&quot;, pron: &quot;feyvır&quot;, desc: &quot;Feel or show approval or preference for.&quot;, sample: &quot;The judge ruled in favor of the father.&quot;, sampleTr: &quot;Yargıç babanın lehine (onu tercih ederek) karar verdi.&quot; },
            { id: 8, en: &quot;Stable&quot;, tr: &quot;Sabit / İstikrarlı&quot;, pron: &quot;steybıl&quot;, desc: &quot;Not likely to change or fail; firmly established.&quot;, sample: &quot;Children need a stable home.&quot;, sampleTr: &quot;Çocukların sabit (istikrarlı) bir yuvaya ihtiyacı vardır.&quot; },
            { id: 9, en: &quot;Priority&quot;, tr: &quot;Öncelikli&quot;, pron: &quot;prioriti&quot;, desc: &quot;The fact or condition of being regarded or treated as more important.&quot;, sample: &quot;The child&#39;s welfare is the top priority.&quot;, sampleTr: &quot;Çocuğun refahı en öncelikli konudur.&quot; },
            { id: 10, en: &quot;Motivate&quot;, tr: &quot;Teşvik etmek&quot;, pron: &quot;motiveyt&quot;, desc: &quot;Provide (someone) with a motive for doing something.&quot;, sample: &quot;The parents are motivated to cooperate.&quot;, sampleTr: &quot;Ebeveynler işbirliği yapmaya teşvik edilmektedir.&quot; },
            { id: 11, en: &quot;Notion&quot;, tr: &quot;Kavram / Düşünce&quot;, pron: &quot;noşın&quot;, desc: &quot;A conception of or belief about something.&quot;, sample: &quot;The notion of shared parenting is popular.&quot;, sampleTr: &quot;Paylaşımlı ebeveynlik kavramı popülerdir.&quot; },
            { id: 12, en: &quot;Petition&quot;, tr: &quot;Dilekçe vermek&quot;, pron: &quot;petişın&quot;, desc: &quot;A formal written request, typically one signed by many people, appealing to authority.&quot;, sample: &quot;She filed a petition for divorce.&quot;, sampleTr: &quot;Boşanma için dilekçe verdi.&quot; },
            { id: 13, en: &quot;Exercise&quot;, tr: &quot;Alıştırma yapmak / Hakkını kullanmak&quot;, pron: &quot;ekzırsays&quot;, desc: &quot;To put into action; use (a right or power).&quot;, sample: &quot;He needs to exercise his visitation rights.&quot;, sampleTr: &quot;Ziyaret haklarını kullanması (üzerinde alıştırma yapması) gerekir.&quot; },
            { id: 14, en: &quot;Outline&quot;, tr: &quot;Taslak / Özetlemek&quot;, pron: &quot;outlayn&quot;, desc: &quot;A general description or plan.&quot;, sample: &quot;The lawyer outlined the custody plan.&quot;, sampleTr: &quot;Avukat velayet planının taslağını çıkardı.&quot; },
            { id: 15, en: &quot;Distinguish&quot;, tr: &quot;Ayırt etmek&quot;, pron: &quot;distinguiş&quot;, desc: &quot;Recognize or treat (someone or something) as different.&quot;, sample: &quot;It is hard to distinguish between the two claims.&quot;, sampleTr: &quot;İki iddiayı ayırt etmek zordur.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-violet-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-violet-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-violet-200&#39;);
            activeBtn.classList.add(&#39;border-violet-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-violet-100 text-violet-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-violet-700 text-white px-4 py-2 rounded-full hover:bg-violet-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-violet-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-violet-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-violet-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-violet-600 hover:text-violet-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-violet-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-violet-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-violet-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-violet-600 hover:text-violet-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-violet-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-violet-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-violet-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-violet-800&#39;, &#39;border&#39;, &#39;border-violet-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-violet-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-violet-800&#39;, &#39;border&#39;, &#39;border-violet-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-violet-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-violet-800&#39;, &#39;border&#39;, &#39;border-violet-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-violet-100 text-violet-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-violet-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-violet-600 focus:ring-violet-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/6946198264571784880/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/custody-yazili-anlasma-tahtinda.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/6946198264571784880'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/6946198264571784880'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/custody-yazili-anlasma-tahtinda.html' title='CUSTODY - YAZILI ANLAŞMA TAHTINDA MÜŞTERİNİN  DEĞERLİ EŞYALARINI MUHAFAZA ETME'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-8715623629519816365</id><published>2026-01-19T02:02:00.000-08:00</published><updated>2026-01-19T03:02:55.321-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>CRIME II – SUÇ II</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Suç Hukuku II (Crime II) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fef2f2; } /* Red-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-red-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-scale-balanced text-2xl mr-3 text-red-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Crime II English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Suç Hukuku II&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-red-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-red-400 hover:bg-red-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-red-200 border-b-4 border-transparent hover:text-white hover:bg-red-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-red-200 border-b-4 border-transparent hover:text-white hover:bg-red-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-red-200 border-b-4 border-transparent hover:text-white hover:bg-red-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Suç Hukuku II (Crime II) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-red-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-red-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-red-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-red-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-red-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-red-800 text-red-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Crime II English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (CRIME II) ---
        const terms = [
            { id: 1, en: &quot;Custody&quot;, tr: &quot;Yazılı anlaşma tahtında müşterinin değerli eşyalarını muhafaza etme&quot;, pron: &quot;kastıdi&quot;, desc: &quot;The protective care or guardianship of someone or something.&quot;, sample: &quot;The bank offers safe custody for valuables.&quot;, sampleTr: &quot;Banka, değerli eşyalar için yazılı anlaşma tahtında muhafaza (nezaret) sunar.&quot; },
            { id: 2, en: &quot;Warn&quot;, tr: &quot;Uyarmak&quot;, pron: &quot;vorn&quot;, desc: &quot;Inform someone in advance of an impending or possible danger, problem, or other unpleasant situation.&quot;, sample: &quot;The officer must warn the suspect of their rights.&quot;, sampleTr: &quot;Memur, şüpheliyi hakları konusunda uyarmalıdır.&quot; },
            { id: 3, en: &quot;Question&quot;, tr: &quot;Sorguya çekmek&quot;, pron: &quot;kuescın&quot;, desc: &quot;Ask questions of (someone), especially in an official context.&quot;, sample: &quot;Police can question the witness for hours.&quot;, sampleTr: &quot;Polis tanığı saatlerce sorguya çekebilir.&quot; },
            { id: 4, en: &quot;Remain&quot;, tr: &quot;Kalmak&quot;, pron: &quot;rimeyn&quot;, desc: &quot;Continue to exist, especially after other similar or related people or things have ceased to exist.&quot;, sample: &quot;You have the right to remain silent.&quot;, sampleTr: &quot;Sessiz kalma hakkına sahipsiniz.&quot; },
            { id: 5, en: &quot;Presence&quot;, tr: &quot;Mevcudiyet&quot;, pron: &quot;prisens&quot;, desc: &quot;The state or fact of existing, occurring, or being present in a place or thing.&quot;, sample: &quot;The lawyer requested his presence during the interrogation.&quot;, sampleTr: &quot;Avukat, sorgu sırasında mevcudiyetini (hazır bulunmayı) talep etti.&quot; },
            { id: 6, en: &quot;Arraign&quot;, tr: &quot;İddianame okunduktan sonra zanlıya suçu kabul edip etmediğini sormak&quot;, pron: &quot;ereyn&quot;, desc: &quot;Call or bring (someone) before a court to answer a criminal charge.&quot;, sample: &quot;They will arraign the suspect tomorrow morning.&quot;, sampleTr: &quot;Şüpheliyi yarın sabah mahkemeye çıkarıp iddianameyi okuyacak ve suçu soracaklar.&quot; },
            { id: 7, en: &quot;Plea&quot;, tr: &quot;Davalının cevap layihası&quot;, pron: &quot;plee&quot;, desc: &quot;A formal statement by or on behalf of a defendant or prisoner, stating guilt or innocence.&quot;, sample: &quot;He entered a plea of not guilty.&quot;, sampleTr: &quot;Suçsuz olduğuna dair bir cevap layihası (beyan) sundu.&quot; },
            { id: 8, en: &quot;Speedy&quot;, tr: &quot;Hızlı&quot;, pron: &quot;spidi&quot;, desc: &quot;Done or occurring quickly.&quot;, sample: &quot;Every defendant has the right to a speedy trial.&quot;, sampleTr: &quot;Her sanığın hızlı bir yargılanma hakkı vardır.&quot; },
            { id: 9, en: &quot;Cross examine&quot;, tr: &quot;Sorguya çekmek (Çapraz sorgu)&quot;, pron: &quot;kros ekzemin&quot;, desc: &quot;Question (a witness called by the other party) in a court of law to discredit or undercut testimony.&quot;, sample: &quot;The defense lawyer began to cross examine the witness.&quot;, sampleTr: &quot;Savunma avukatı tanığı çapraz sorguya çekmeye başladı.&quot; },
            { id: 10, en: &quot;Refute&quot;, tr: &quot;İnkar etmek / Çürütmek&quot;, pron: &quot;refut&quot;, desc: &quot;Prove (a statement or theory) to be wrong or false; disprove.&quot;, sample: &quot;The evidence serves to refute the allegations.&quot;, sampleTr: &quot;Kanıtlar iddiaları inkar etmeye (çürütmeye) yarar.&quot; },
            { id: 11, en: &quot;Prove&quot;, tr: &quot;Sonuçlandırmak / Kanıtlamak&quot;, pron: &quot;pruuv&quot;, desc: &quot;Demonstrate the truth or existence of (something) by evidence or argument.&quot;, sample: &quot;The prosecutor must prove guilt beyond reasonable doubt.&quot;, sampleTr: &quot;Savcı suçluluğu makul şüphenin ötesinde kanıtlamalıdır (sonuçlandırmalıdır).&quot; },
            { id: 12, en: &quot;Deliberate&quot;, tr: &quot;İhtiyatlı / Kasti&quot;, pron: &quot;delibıreyt&quot;, desc: &quot;Done consciously and intentionally; or to engage in long and careful consideration.&quot;, sample: &quot;The jury will deliberate for several days.&quot;, sampleTr: &quot;Jüri birkaç gün boyunca ihtiyatlı bir şekilde düşünecek (müzakere edecek).&quot; },
            { id: 13, en: &quot;Convict&quot;, tr: &quot;Suçlu bulmak&quot;, pron: &quot;konvikt&quot;, desc: &quot;Declare (someone) to be guilty of a criminal offense by the verdict of a jury or the decision of a judge.&quot;, sample: &quot;It is difficult to convict without DNA evidence.&quot;, sampleTr: &quot;DNA kanıtı olmadan suçlu bulmak zordur.&quot; },
            { id: 14, en: &quot;Sum up&quot;, tr: &quot;Hüküm vermek / Özetlemek&quot;, pron: &quot;sam ap&quot;, desc: &quot;Give a brief summary of something.&quot;, sample: &quot;The judge will sum up the case for the jury.&quot;, sampleTr: &quot;Yargıç, jüri için davayı özetleyecek (hükme bağlayacak noktaları sunacak).&quot; },
            { id: 15, en: &quot;Stand&quot;, tr: &quot;Katılmak için beklemek&quot;, pron: &quot;stend&quot;, desc: &quot;To be in a situation where one is likely to do something (e.g., stand trial).&quot;, sample: &quot;He is fit to stand trial.&quot;, sampleTr: &quot;Yargılanmaya (katılmak için beklemeye) uygundur.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-red-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-red-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-red-200&#39;);
            activeBtn.classList.add(&#39;border-red-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-red-100 text-red-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-red-700 text-white px-4 py-2 rounded-full hover:bg-red-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-red-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-red-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-red-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-red-600 hover:text-red-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-red-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-red-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-red-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-red-600 hover:text-red-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-red-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-red-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-red-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-red-800&#39;, &#39;border&#39;, &#39;border-red-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-red-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-red-800&#39;, &#39;border&#39;, &#39;border-red-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-red-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-red-800&#39;, &#39;border&#39;, &#39;border-red-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-red-100 text-red-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-red-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-red-600 focus:ring-red-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/8715623629519816365/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/crime-ii-suc-ii.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8715623629519816365'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/8715623629519816365'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/crime-ii-suc-ii.html' title='CRIME II – SUÇ II'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-1637459916776201486</id><published>2026-01-19T01:59:00.000-08:00</published><updated>2026-01-19T03:03:02.633-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>CRIME I – SUÇ I</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Suç Hukuku I (Crime I) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #f8fafc; } /* Slate-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-slate-800 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-gavel text-2xl mr-3 text-slate-300&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Crime I English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Suç Hukuku I&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-slate-900&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-slate-400 hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-slate-300 border-b-4 border-transparent hover:text-white hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-slate-300 border-b-4 border-transparent hover:text-white hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-slate-300 border-b-4 border-transparent hover:text-white hover:bg-slate-700 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Suç Hukuku I (Crime I) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-slate-600&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-slate-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-slate-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-slate-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-slate-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-slate-800 text-slate-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Crime I English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (CRIME I) ---
        const terms = [
            { id: 1, en: &quot;Act&quot;, tr: &quot;İş / Eylem&quot;, pron: &quot;ekt&quot;, desc: &quot;A thing done; a deed.&quot;, sample: &quot;The act was considered a felony.&quot;, sampleTr: &quot;Eylem bir ağır suç olarak kabul edildi.&quot; },
            { id: 2, en: &quot;Group&quot;, tr: &quot;Gruplamak&quot;, pron: &quot;gruup&quot;, desc: &quot;To put into a category.&quot;, sample: &quot;Crimes are grouped by severity.&quot;, sampleTr: &quot;Suçlar ciddiyetine göre gruplandırılır.&quot; },
            { id: 3, en: &quot;Prescribe&quot;, tr: &quot;Nizam koymak / Öngörmek&quot;, pron: &quot;preskrayb&quot;, desc: &quot;To lay down, in writing or otherwise, as a rule or a course of action.&quot;, sample: &quot;The law prescribes a penalty for theft.&quot;, sampleTr: &quot;Yasa hırsızlık için bir ceza öngörür (nizam koyar).&quot; },
            { id: 4, en: &quot;Classification&quot;, tr: &quot;Sınıflandırma&quot;, pron: &quot;klasifikeyşın&quot;, desc: &quot;The action or process of classifying something.&quot;, sample: &quot;The classification of the crime determines the court.&quot;, sampleTr: &quot;Suçun sınıflandırılması mahkemeyi belirler.&quot; },
            { id: 5, en: &quot;Case&quot;, tr: &quot;Dava&quot;, pron: &quot;keys&quot;, desc: &quot;A legal action, especially one to be decided in a court of law.&quot;, sample: &quot;The prosecution presented its case.&quot;, sampleTr: &quot;Savcılık davasını sundu.&quot; },
            { id: 6, en: &quot;Misdemeanor&quot;, tr: &quot;Cürüm / Kabahat&quot;, pron: &quot;misdemiinır&quot;, desc: &quot;A minor wrongdoing.&quot;, sample: &quot;Shoplifting is often charged as a misdemeanor.&quot;, sampleTr: &quot;Mağaza hırsızlığı genellikle cürüm (kabahat) olarak suçlanır.&quot; },
            { id: 7, en: &quot;Complaint&quot;, tr: &quot;Şikayet&quot;, pron: &quot;kompleynt&quot;, desc: &quot;A statement that a situation is unsatisfactory or unacceptable.&quot;, sample: &quot;The victim filed a formal complaint.&quot;, sampleTr: &quot;Kurban resmi bir şikayette bulundu.&quot; },
            { id: 8, en: &quot;Demonstrate&quot;, tr: &quot;Göstermek / İspat etmek&quot;, pron: &quot;demonstreyt&quot;, desc: &quot;Clearly show the existence or truth of (something) by giving proof or evidence.&quot;, sample: &quot;The evidence will demonstrate his guilt.&quot;, sampleTr: &quot;Kanıtlar onun suçluluğunu gösterecek (ispat edecek).&quot; },
            { id: 9, en: &quot;Assess&quot;, tr: &quot;Kıymet takdir etmek / Değerlendirmek&quot;, pron: &quot;ases&quot;, desc: &quot;Evaluate or estimate the nature, ability, or quality of.&quot;, sample: &quot;The judge must assess the damages.&quot;, sampleTr: &quot;Yargıç zararları kıymet takdir etmelidir (değerlendirmelidir).&quot; },
            { id: 10, en: &quot;Decide&quot;, tr: &quot;Hüküm vermek / Karar vermek&quot;, pron: &quot;disayd&quot;, desc: &quot;Come to a resolution in the mind as a result of consideration.&quot;, sample: &quot;The jury will decide the verdict.&quot;, sampleTr: &quot;Jüri hükmü verecektir (karara varacaktır).&quot; },
            { id: 11, en: &quot;Warrant&quot;, tr: &quot;Yetki belgesi / Arama emri&quot;, pron: &quot;verınt&quot;, desc: &quot;A document authorizing the police to make an arrest or search premises.&quot;, sample: &quot;Police need a warrant to search the house.&quot;, sampleTr: &quot;Polisin evi aramak için bir yetki belgesine (arama emrine) ihtiyacı var.&quot; },
            { id: 12, en: &quot;Necessary&quot;, tr: &quot;Gerekli&quot;, pron: &quot;nesesıri&quot;, desc: &quot;Required to be done, achieved, or present.&quot;, sample: &quot;Use only necessary force.&quot;, sampleTr: &quot;Sadece gerekli gücü kullanın.&quot; },
            { id: 13, en: &quot;Probable cause&quot;, tr: &quot;Makul sebep&quot;, pron: &quot;probıbıl kaus&quot;, desc: &quot;Reasonable grounds (for making a search, pressing a charge, etc.).&quot;, sample: &quot;They had probable cause to stop the car.&quot;, sampleTr: &quot;Arabayı durdurmak için makul sebepleri vardı.&quot; },
            { id: 14, en: &quot;Distance&quot;, tr: &quot;Mesafe&quot;, pron: &quot;distıns&quot;, desc: &quot;An amount of space between two things or people.&quot;, sample: &quot;Keep a safe distance from the suspect.&quot;, sampleTr: &quot;Şüpheliden güvenli bir mesafe bırakın.&quot; },
            { id: 15, en: &quot;Capacity&quot;, tr: &quot;Kapasite / Ehliyet (Hukuki)&quot;, pron: &quot;kepasiti&quot;, desc: &quot;The ability or power to do, experience, or understand something.&quot;, sample: &quot;Does he have the mental capacity to stand trial?&quot;, sampleTr: &quot;Yargılanmak için zihinsel kapasitesi (ehliyeti) var mı?&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-slate-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-slate-300&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-slate-300&#39;);
            activeBtn.classList.add(&#39;border-slate-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-slate-100 text-slate-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-slate-700 text-white px-4 py-2 rounded-full hover:bg-slate-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-slate-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-slate-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-slate-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-slate-600 hover:text-slate-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-slate-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-slate-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-slate-600 hover:text-slate-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-slate-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-slate-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-slate-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-slate-800&#39;, &#39;border&#39;, &#39;border-slate-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-slate-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-slate-800&#39;, &#39;border&#39;, &#39;border-slate-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-slate-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-slate-800&#39;, &#39;border&#39;, &#39;border-slate-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-slate-100 text-slate-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-slate-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-slate-600 focus:ring-slate-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/1637459916776201486/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/crime-i-suc-i.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1637459916776201486'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/1637459916776201486'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/crime-i-suc-i.html' title='CRIME I – SUÇ I'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-3968850595751359848</id><published>2026-01-19T01:57:00.000-08:00</published><updated>2026-01-19T01:57:24.726-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>CREDIT - ALACAK</title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Kredi ve Alacak İngilizcesi (Credit) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #ecfdf5; } /* Emerald-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-emerald-700 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-credit-card text-2xl mr-3 text-emerald-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Credit &amp; Collection English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Kredi Terimleri&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-emerald-800&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-emerald-400 hover:bg-emerald-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-emerald-200 border-b-4 border-transparent hover:text-white hover:bg-emerald-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-emerald-200 border-b-4 border-transparent hover:text-white hover:bg-emerald-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-emerald-200 border-b-4 border-transparent hover:text-white hover:bg-emerald-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Kredi ve Alacak Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-emerald-500&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-emerald-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-emerald-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-emerald-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-emerald-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-emerald-800 text-emerald-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Credit English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (CREDIT) ---
        const terms = [
            { id: 1, en: &quot;Access&quot;, tr: &quot;Erişmek&quot;, pron: &quot;akses&quot;, desc: &quot;The right or opportunity to use or benefit from something.&quot;, sample: &quot;The bank gave him access to his credit report.&quot;, sampleTr: &quot;Banka ona kredi raporuna erişim izni verdi.&quot; },
            { id: 2, en: &quot;Convenient&quot;, tr: &quot;Uygun / Elverişli&quot;, pron: &quot;konveniyınt&quot;, desc: &quot;Fitting in well with a person&#39;s needs, activities, and plans.&quot;, sample: &quot;Online banking is very convenient for customers.&quot;, sampleTr: &quot;Online bankacılık müşteriler için çok uygundur (elverişlidir).&quot; },
            { id: 3, en: &quot;Minor&quot;, tr: &quot;Önemsiz / Küçük&quot;, pron: &quot;maynır&quot;, desc: &quot;Lesser in importance, seriousness, or significance.&quot;, sample: &quot;It was only a minor error in the calculation.&quot;, sampleTr: &quot;Hesaplamada sadece önemsiz bir hataydı.&quot; },
            { id: 4, en: &quot;Hazardous&quot;, tr: &quot;Tehlikeli&quot;, pron: &quot;hazardiyıs&quot;, desc: &quot;Risky; dangerous.&quot;, sample: &quot;Investing without research can be hazardous.&quot;, sampleTr: &quot;Araştırma yapmadan yatırım yapmak tehlikeli olabilir.&quot; },
            { id: 5, en: &quot;Punctual&quot;, tr: &quot;Dakik&quot;, pron: &quot;pankşıl&quot;, desc: &quot;Happening or doing something at the agreed or proper time.&quot;, sample: &quot;He is always punctual with his loan payments.&quot;, sampleTr: &quot;Kredi ödemelerinde her zaman dakiktir.&quot; },
            { id: 6, en: &quot;Credit history&quot;, tr: &quot;Fatura ödemeleri için kişisel kayıt&quot;, pron: &quot;kredit histori&quot;, desc: &quot;A record of a borrower&#39;s responsible repayment of debts.&quot;, sample: &quot;A good credit history helps you get a loan.&quot;, sampleTr: &quot;İyi bir kredi geçmişi (kişisel kayıt) kredi almanıza yardımcı olur.&quot; },
            { id: 7, en: &quot;Divulge&quot;, tr: &quot;İfşa etmek&quot;, pron: &quot;divalc&quot;, desc: &quot;Make known (private or sensitive information).&quot;, sample: &quot;Banks cannot divulge client details to third parties.&quot;, sampleTr: &quot;Bankalar müşteri detaylarını üçüncü taraflara ifşa edemez.&quot; },
            { id: 8, en: &quot;Order&quot;, tr: &quot;Yönetmek / Emretmek&quot;, pron: &quot;ordır&quot;, desc: &quot;To give an authoritative direction or instruction.&quot;, sample: &quot;The court ordered the seizure of assets.&quot;, sampleTr: &quot;Mahkeme varlıklara el konulmasını emretti (yönetti).&quot; },
            { id: 9, en: &quot;Evaluate&quot;, tr: &quot;Değer vermek / Değerlendirmek&quot;, pron: &quot;evalueyt&quot;, desc: &quot;To form an idea of the amount, number, or value of something.&quot;, sample: &quot;Lenders evaluate your ability to repay.&quot;, sampleTr: &quot;Borç verenler geri ödeme yeteneğinizi değerlendirir (değer verir).&quot; },
            { id: 10, en: &quot;Deny&quot;, tr: &quot;İnkar etmek / Reddetmek&quot;, pron: &quot;dinay&quot;, desc: &quot;To refuse to grant a request or admit the truth.&quot;, sample: &quot;They may deny the credit application.&quot;, sampleTr: &quot;Kredi başvurusunu reddedebilirler (inkar edebilirler).&quot; },
            { id: 11, en: &quot;Provision&quot;, tr: &quot;Karşılık&quot;, pron: &quot;provijyın&quot;, desc: &quot;An amount set aside in accounts for a known liability.&quot;, sample: &quot;The bank made a provision for bad debts.&quot;, sampleTr: &quot;Banka şüpheli alacaklar için bir karşılık ayırdı.&quot; },
            { id: 12, en: &quot;Installment&quot;, tr: &quot;Taksit&quot;, pron: &quot;instolmınt&quot;, desc: &quot;A sum of money due as one of several equal payments for something.&quot;, sample: &quot;She paid the debt in monthly installments.&quot;, sampleTr: &quot;Borcu aylık taksitler halinde ödedi.&quot; },
            { id: 13, en: &quot;Regulate&quot;, tr: &quot;Usulüne uydurmak / Düzenlemek&quot;, pron: &quot;reguleyt&quot;, desc: &quot;Control or maintain the rate or speed of something so that it operates properly.&quot;, sample: &quot;Laws regulate the banking industry.&quot;, sampleTr: &quot;Yasalar bankacılık sektörünü düzenler (usulüne uydurur).&quot; },
            { id: 14, en: &quot;Disseminate&quot;, tr: &quot;Yaymak&quot;, pron: &quot;disemineyt&quot;, desc: &quot;Spread (something, especially information) widely.&quot;, sample: &quot;Credit bureaus disseminate information to lenders.&quot;, sampleTr: &quot;Kredi büroları bilgileri borç verenlere yayar.&quot; },
            { id: 15, en: &quot;Grant&quot;, tr: &quot;Bahşetmek / Vermek&quot;, pron: &quot;grent&quot;, desc: &quot;Agree to give or allow (something requested) to.&quot;, sample: &quot;The bank decided to grant the loan.&quot;, sampleTr: &quot;Banka krediyi vermeye (bahşetmeye) karar verdi.&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-emerald-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-emerald-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-emerald-200&#39;);
            activeBtn.classList.add(&#39;border-emerald-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-emerald-100 text-emerald-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-emerald-700 text-white px-4 py-2 rounded-full hover:bg-emerald-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-emerald-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-emerald-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-emerald-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-emerald-600 hover:text-emerald-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-emerald-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-emerald-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-emerald-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-emerald-600 hover:text-emerald-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-emerald-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-emerald-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-emerald-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-emerald-800&#39;, &#39;border&#39;, &#39;border-emerald-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-emerald-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-emerald-800&#39;, &#39;border&#39;, &#39;border-emerald-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-emerald-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-emerald-800&#39;, &#39;border&#39;, &#39;border-emerald-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-emerald-100 text-emerald-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-emerald-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-emerald-600 focus:ring-emerald-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/3968850595751359848/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/credit-alacak.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/3968850595751359848'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/3968850595751359848'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/credit-alacak.html' title='CREDIT - ALACAK'/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-2790250778564958355.post-6201192831121880181</id><published>2026-01-19T01:54:00.000-08:00</published><updated>2026-01-19T01:56:33.928-08:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Terimler"/><title type='text'>COPYRIGHT II – TELİF HAKKI II </title><content type='html'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;tr&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Telif Hakkı II (Copyright II) Çalışma Platformu&lt;/title&gt;
    &lt;!-- Tailwind CSS (CDN) --&gt;
    &lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;
    &lt;!-- FontAwesome (Icons) --&gt;
    &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot;&gt;
    &lt;!-- Google Fonts --&gt;
    &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
    
    &lt;style&gt;
        body { font-family: &#39;Poppins&#39;, sans-serif; background-color: #fffbeb; } /* Amber-50 background */
        
        /* Flashcard Flip Efekti */
        .perspective-1000 { perspective: 1000px; }
        .transform-style-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Tab Geçiş Animasyonu */
        .tab-content { display: none; animation: fadeIn 0.3s ease-in-out; }
        .tab-content.active { display: block; }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Tooltip stili */
        .tooltip-container:hover .tooltip-text {
            visibility: visible;
            opacity: 1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;text-gray-800 min-h-screen flex flex-col&quot;&gt;

    &lt;!-- Header --&gt;
    &lt;header class=&quot;bg-amber-700 text-white shadow-lg sticky top-0 z-50&quot;&gt;
        &lt;div class=&quot;max-w-7xl mx-auto px-4 sm:px-6 lg:px-8&quot;&gt;
            &lt;div class=&quot;flex justify-between items-center h-16&quot;&gt;
                &lt;div class=&quot;flex items-center&quot;&gt;
                    &lt;i class=&quot;fa-solid fa-copyright text-2xl mr-3 text-amber-200&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-xl font-bold tracking-wide&quot;&gt;Copyright II English Hub&lt;/h1&gt;
                &lt;/div&gt;
                &lt;!-- Mobil Menu Button (Basit) --&gt;
                &lt;div class=&quot;md:hidden&quot;&gt;
                    &lt;span class=&quot;text-xs opacity-70&quot;&gt;Telif Hakkı II&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Navigation Tabs --&gt;
        &lt;div class=&quot;bg-amber-800&quot;&gt;
            &lt;div class=&quot;max-w-7xl mx-auto px-2&quot;&gt;
                &lt;nav class=&quot;flex -mb-px space-x-4 overflow-x-auto&quot; aria-label=&quot;Tabs&quot;&gt;
                    &lt;button onclick=&quot;switchTab(&#39;learn&#39;)&quot; id=&quot;tab-learn&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-white border-b-4 border-amber-400 hover:bg-amber-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-book-open mb-1 block&quot;&gt;&lt;/i&gt; Öğren
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exercises&#39;)&quot; id=&quot;tab-exercises&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-amber-200 border-b-4 border-transparent hover:text-white hover:bg-amber-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-pen-to-square mb-1 block&quot;&gt;&lt;/i&gt; Alıştırmalar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;games&#39;)&quot; id=&quot;tab-games&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-amber-200 border-b-4 border-transparent hover:text-white hover:bg-amber-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-gamepad mb-1 block&quot;&gt;&lt;/i&gt; Oyunlar
                    &lt;/button&gt;
                    &lt;button onclick=&quot;switchTab(&#39;exam&#39;)&quot; id=&quot;tab-exam&quot; class=&quot;tab-btn w-1/4 py-4 px-1 text-center text-sm font-medium text-amber-200 border-b-4 border-transparent hover:text-white hover:bg-amber-600 transition&quot;&gt;
                        &lt;i class=&quot;fa-solid fa-graduation-cap mb-1 block&quot;&gt;&lt;/i&gt; Sınav
                    &lt;/button&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/header&gt;

    &lt;!-- Main Content --&gt;
    &lt;main class=&quot;flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8&quot;&gt;

        &lt;!-- 1. TAB: ÖĞRENİM (LEARN) --&gt;
        &lt;div id=&quot;learn&quot; class=&quot;tab-content active&quot;&gt;
            &lt;div class=&quot;text-center mb-8&quot;&gt;
                &lt;h2 class=&quot;text-2xl font-bold text-gray-800&quot;&gt;Telif Hakkı II (Copyright II) Terimleri&lt;/h2&gt;
                &lt;p class=&quot;text-gray-600&quot;&gt;Karta tıklayarak anlamını gör, cümleye gelerek çevirisini oku.&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6&quot; id=&quot;flashcards-container&quot;&gt;
                &lt;!-- JS ile doldurulacak --&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 2. TAB: ALIŞTIRMALAR (EXERCISES) --&gt;
        &lt;div id=&quot;exercises&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;bg-white rounded-lg shadow-md p-6 border-t-4 border-amber-500&quot;&gt;
                &lt;div class=&quot;flex space-x-4 mb-6 border-b pb-4 overflow-x-auto&quot;&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex1&#39;)&quot; class=&quot;px-4 py-2 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 font-medium whitespace-nowrap&quot;&gt;1. Çoktan Seçmeli&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex2&#39;)&quot; class=&quot;px-4 py-2 bg-green-100 text-green-700 rounded hover:bg-green-200 font-medium whitespace-nowrap&quot;&gt;2. Boşluk Doldurma&lt;/button&gt;
                    &lt;button onclick=&quot;showExercise(&#39;ex3&#39;)&quot; class=&quot;px-4 py-2 bg-purple-100 text-purple-700 rounded hover:bg-purple-200 font-medium whitespace-nowrap&quot;&gt;3. Eşleştirme&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 1 --&gt;
                &lt;div id=&quot;ex1&quot; class=&quot;exercise-panel&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-blue-800&quot;&gt;Doğru Türkçe Karşılığı Seçiniz&lt;/h3&gt;
                    &lt;div id=&quot;mc-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkMC()&quot; class=&quot;mt-6 w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;mc-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 2 --&gt;
                &lt;div id=&quot;ex2&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-green-800&quot;&gt;Cümleyi Tamamlayınız&lt;/h3&gt;
                    &lt;div id=&quot;fitb-container&quot; class=&quot;space-y-4&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;checkFITB()&quot; class=&quot;mt-6 w-full bg-green-600 text-white py-2 rounded hover:bg-green-700 transition&quot;&gt;Kontrol Et&lt;/button&gt;
                    &lt;div id=&quot;fitb-result&quot; class=&quot;mt-4 hidden p-4 rounded bg-gray-100&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Alıştırma 3 --&gt;
                &lt;div id=&quot;ex3&quot; class=&quot;exercise-panel hidden&quot;&gt;
                    &lt;h3 class=&quot;text-lg font-semibold mb-4 text-purple-800&quot;&gt;Terimleri Eşleştiriniz&lt;/h3&gt;
                    &lt;p class=&quot;text-sm text-gray-500 mb-4&quot;&gt;Sol taraftaki İngilizce kelimeye tıklayın, ardından sağdaki Türkçe karşılığına tıklayın.&lt;/p&gt;
                    &lt;div class=&quot;flex flex-col md:flex-row justify-between gap-8&quot; id=&quot;match-container&quot;&gt;
                        &lt;div id=&quot;match-left&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                        &lt;div id=&quot;match-right&quot; class=&quot;flex-1 space-y-2&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;match-result&quot; class=&quot;mt-4 text-center font-bold text-lg h-8&quot;&gt;&lt;/div&gt;
                    &lt;button onclick=&quot;resetMatching()&quot; class=&quot;mt-4 text-sm text-gray-500 underline&quot;&gt;Sıfırla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 3. TAB: OYUNLAR (GAMES) --&gt;
        &lt;div id=&quot;games&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;grid grid-cols-1 lg:grid-cols-2 gap-8&quot;&gt;
                &lt;!-- Oyun 1: Word Scramble --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-orange-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-orange-700&quot;&gt;&lt;i class=&quot;fa-solid fa-shuffle mr-2&quot;&gt;&lt;/i&gt;Kelime Karıştırmaca&lt;/h3&gt;
                    &lt;div class=&quot;text-center&quot;&gt;
                        &lt;p class=&quot;text-sm text-gray-500 mb-2&quot;&gt;İpucu: &lt;span id=&quot;scramble-hint&quot; class=&quot;font-bold text-gray-800&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                        &lt;div id=&quot;scramble-word&quot; class=&quot;text-3xl font-mono tracking-widest mb-6 font-bold text-orange-600&quot;&gt;Loading...&lt;/div&gt;
                        &lt;input type=&quot;text&quot; id=&quot;scramble-input&quot; class=&quot;border-2 border-gray-300 rounded p-2 w-2/3 text-center uppercase focus:border-orange-500 focus:outline-none&quot; placeholder=&quot;Kelimeyi yazın&quot;&gt;
                        &lt;button onclick=&quot;checkScramble()&quot; class=&quot;ml-2 bg-orange-600 text-white px-4 py-2 rounded hover:bg-orange-700&quot;&gt;Kontrol&lt;/button&gt;
                        &lt;p id=&quot;scramble-msg&quot; class=&quot;mt-4 h-6 font-semibold&quot;&gt;&lt;/p&gt;
                        &lt;button onclick=&quot;initScramble()&quot; class=&quot;mt-2 text-xs text-gray-400&quot;&gt;Pas Geç&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

                &lt;!-- Oyun 2: Memory Match --&gt;
                &lt;div class=&quot;bg-white p-6 rounded-lg shadow-lg border-t-4 border-yellow-500&quot;&gt;
                    &lt;h3 class=&quot;text-xl font-bold mb-4 text-yellow-600&quot;&gt;&lt;i class=&quot;fa-solid fa-layer-group mr-2&quot;&gt;&lt;/i&gt;Hafıza Kartları&lt;/h3&gt;
                    &lt;div class=&quot;text-center mb-2&quot;&gt;
                        &lt;span id=&quot;memory-score&quot; class=&quot;text-sm font-bold&quot;&gt;Eşleşmeler: 0/6&lt;/span&gt;
                        &lt;button onclick=&quot;initMemoryGame()&quot; class=&quot;ml-4 text-xs bg-gray-200 px-2 py-1 rounded hover:bg-gray-300&quot;&gt;Yeniden Başlat&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div id=&quot;memory-grid&quot; class=&quot;grid grid-cols-4 gap-2 h-64&quot;&gt;
                        &lt;!-- Kartlar JS ile gelecek --&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;!-- 4. TAB: SINAV (EXAM) --&gt;
        &lt;div id=&quot;exam&quot; class=&quot;tab-content&quot;&gt;
            &lt;div class=&quot;max-w-3xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200&quot;&gt;
                &lt;div class=&quot;bg-amber-800 text-white p-6 text-center&quot;&gt;
                    &lt;h2 class=&quot;text-2xl font-bold&quot;&gt;Genel Değerlendirme Sınavı&lt;/h2&gt;
                    &lt;p class=&quot;opacity-80&quot;&gt;Toplam 15 Soru. Başarılar!&lt;/p&gt;
                &lt;/div&gt;
                
                &lt;div id=&quot;exam-questions&quot; class=&quot;p-8 space-y-8&quot;&gt;
                    &lt;!-- Sorular Buraya Gelecek --&gt;
                &lt;/div&gt;

                &lt;div id=&quot;exam-controls&quot; class=&quot;p-6 bg-gray-50 border-t text-center&quot;&gt;
                    &lt;button onclick=&quot;finishExam()&quot; class=&quot;bg-amber-700 text-white px-8 py-3 rounded-full text-lg font-semibold hover:bg-amber-800 shadow-lg transform hover:scale-105 transition&quot;&gt;Sınavı Bitir&lt;/button&gt;
                &lt;/div&gt;

                &lt;!-- Sonuç Ekranı --&gt;
                &lt;div id=&quot;exam-result-screen&quot; class=&quot;hidden p-8 text-center&quot;&gt;
                    &lt;div class=&quot;mb-6&quot;&gt;
                        &lt;div class=&quot;inline-block p-4 rounded-full bg-gray-100 mb-4&quot;&gt;
                            &lt;span id=&quot;exam-score-display&quot; class=&quot;text-4xl font-bold text-amber-700&quot;&gt;0&lt;/span&gt;
                            &lt;span class=&quot;text-xl text-gray-500&quot;&gt;/ 100&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;h3 id=&quot;exam-feedback-title&quot; class=&quot;text-2xl font-bold mb-2&quot;&gt;&lt;/h3&gt;
                        &lt;p id=&quot;exam-feedback-msg&quot; class=&quot;text-gray-600&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;text-left bg-red-50 p-4 rounded-lg border border-red-200 hidden&quot; id=&quot;wrong-answers-box&quot;&gt;
                        &lt;h4 class=&quot;font-bold text-red-700 mb-2&quot;&gt;Hatalı Cevaplar ve Açıklamalar:&lt;/h4&gt;
                        &lt;ul id=&quot;wrong-answers-list&quot; class=&quot;space-y-3 text-sm&quot;&gt;&lt;/ul&gt;
                    &lt;/div&gt;

                    &lt;button onclick=&quot;initExam()&quot; class=&quot;mt-8 px-6 py-2 border border-gray-300 rounded hover:bg-gray-100&quot;&gt;Sınavı Tekrarla&lt;/button&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/main&gt;

    &lt;!-- Footer --&gt;
    &lt;footer class=&quot;bg-amber-800 text-amber-100 text-center py-4 mt-8 text-sm&quot;&gt;
        &lt;p&gt;&amp;copy; 2024 Copyright II English Learning Module.&lt;/p&gt;
    &lt;/footer&gt;

    &lt;!-- JAVASCRIPT LOGIC --&gt;
    &lt;script&gt;
        // --- YENİ VERİ SETİ (COPYRIGHT II) ---
        const terms = [
            { id: 1, en: &quot;Restore&quot;, tr: &quot;Eski haline getirmek&quot;, pron: &quot;ristor&quot;, desc: &quot;To bring back to a former, original, or normal condition.&quot;, sample: &quot;They want to restore the copyright protection.&quot;, sampleTr: &quot;Telif hakkı korumasını eski haline getirmek istiyorlar.&quot; },
            { id: 2, en: &quot;Public domain&quot;, tr: &quot;Kapsam dışı / Kamuya mal olmuş&quot;, pron: &quot;pablik domeyn&quot;, desc: &quot;The state of belonging to the public; not subject to copyright.&quot;, sample: &quot;The book is now in the public domain.&quot;, sampleTr: &quot;Kitap artık kamuya mal olmuştur (herkesçe kullanılabilir).&quot; },
            { id: 3, en: &quot;Fail&quot;, tr: &quot;İhmal etmek&quot;, pron: &quot;feyıl&quot;, desc: &quot;To neglect to do something.&quot;, sample: &quot;If you fail to renew, you lose the right.&quot;, sampleTr: &quot;Yenilemeyi ihmal ederseniz hakkı kaybedersiniz.&quot; },
            { id: 4, en: &quot;Renew&quot;, tr: &quot;Süreyi uzatmak / Yenilemek&quot;, pron: &quot;riniuv&quot;, desc: &quot;To extend the period of validity of a license, subscription, or contract.&quot;, sample: &quot;You must renew the registration.&quot;, sampleTr: &quot;Kaydı yenilemeniz (süresini uzatmanız) gerekir.&quot; },
            { id: 5, en: &quot;Advise&quot;, tr: &quot;Tavsiye etmek&quot;, pron: &quot;edvays&quot;, desc: &quot;To offer suggestions about the best course of action.&quot;, sample: &quot;I advise you to consult a lawyer.&quot;, sampleTr: &quot;Bir avukata danışmanızı tavsiye ederim.&quot; },
            { id: 6, en: &quot;Identify&quot;, tr: &quot;Tespit etmek&quot;, pron: &quot;aydentifay&quot;, desc: &quot;To establish or indicate who or what someone or something is.&quot;, sample: &quot;Can you identify the copyright holder?&quot;, sampleTr: &quot;Telif hakkı sahibini tespit edebilir misiniz?&quot; },
            { id: 7, en: &quot;Hierarchy&quot;, tr: &quot;Hiyerarşi&quot;, pron: &quot;hayerarki&quot;, desc: &quot;A system or organization in which people or groups are ranked one above the other.&quot;, sample: &quot;There is a hierarchy of rights.&quot;, sampleTr: &quot;Hakların bir hiyerarşisi vardır.&quot; },
            { id: 8, en: &quot;Constitute&quot;, tr: &quot;Meydana getirmek / Oluşturmak&quot;, pron: &quot;konstitut&quot;, desc: &quot;To be (a part of) a whole.&quot;, sample: &quot;These actions constitute infringement.&quot;, sampleTr: &quot;Bu eylemler ihlal meydana getirir (oluşturur).&quot; },
            { id: 9, en: &quot;Contract&quot;, tr: &quot;Kontrat / Sözleşme&quot;, pron: &quot;kontrekt&quot;, desc: &quot;A written or spoken agreement.&quot;, sample: &quot;The contract specifies the royalties.&quot;, sampleTr: &quot;Kontrat telif ücretlerini belirtir.&quot; },
            { id: 10, en: &quot;Complex&quot;, tr: &quot;Zor / Karmaşık&quot;, pron: &quot;kompleks&quot;, desc: &quot;Consisting of many different and connected parts.&quot;, sample: &quot;Copyright law can be very complex.&quot;, sampleTr: &quot;Telif hakkı yasası çok karmaşık (zor) olabilir.&quot; },
            { id: 11, en: &quot;State&quot;, tr: &quot;Belirtmek&quot;, pron: &quot;steyt&quot;, desc: &quot;To express something definitely or clearly in speech or writing.&quot;, sample: &quot;The document states the terms clearly.&quot;, sampleTr: &quot;Belge şartları açıkça belirtir.&quot; },
            { id: 12, en: &quot;Select&quot;, tr: &quot;Seçilmiş / Seçmek&quot;, pron: &quot;selekt&quot;, desc: &quot;Carefully chosen as being the best or most suitable.&quot;, sample: &quot;Only select works are protected.&quot;, sampleTr: &quot;Sadece seçilmiş eserler korunur.&quot; },
            { id: 13, en: &quot;Assign&quot;, tr: &quot;Devretmek&quot;, pron: &quot;essayn&quot;, desc: &quot;To transfer (rights or property).&quot;, sample: &quot;The author can assign the copyright to a publisher.&quot;, sampleTr: &quot;Yazar telif hakkını bir yayıncıya devredebilir.&quot; },
            { id: 14, en: &quot;Factor&quot;, tr: &quot;Etken / Faktör&quot;, pron: &quot;fektır&quot;, desc: &quot;A circumstance, fact, or influence that contributes to a result.&quot;, sample: &quot;Fair use depends on four factors.&quot;, sampleTr: &quot;Adil kullanım dört etkene (faktöre) bağlıdır.&quot; },
            { id: 15, en: &quot;Consider&quot;, tr: &quot;Düşünmek / Dikkate almak&quot;, pron: &quot;konsider&quot;, desc: &quot;To think carefully about something.&quot;, sample: &quot;The court will consider the purpose of the use.&quot;, sampleTr: &quot;Mahkeme kullanım amacını dikkate alacaktır (düşünecektir).&quot; }
        ];

        // --- SESLİ OKUMA ---
        function speak(text) {
            if (&#39;speechSynthesis&#39; in window) {
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = &#39;en-US&#39;;
                utterance.rate = 0.9;
                window.speechSynthesis.speak(utterance);
            } else {
                alert(&quot;Tarayıcınız sesli okumayı desteklemiyor.&quot;);
            }
        }

        // --- TAB YÖNETİMİ ---
        function switchTab(tabId) {
            document.querySelectorAll(&#39;.tab-content&#39;).forEach(el =&gt; el.classList.remove(&#39;active&#39;));
            document.querySelectorAll(&#39;.tab-btn&#39;).forEach(el =&gt; {
                el.classList.remove(&#39;border-amber-400&#39;, &#39;text-white&#39;);
                el.classList.add(&#39;border-transparent&#39;, &#39;text-amber-200&#39;);
            });
            
            document.getElementById(tabId).classList.add(&#39;active&#39;);
            const activeBtn = document.getElementById(&#39;tab-&#39; + tabId);
            activeBtn.classList.remove(&#39;border-transparent&#39;, &#39;text-amber-200&#39;);
            activeBtn.classList.add(&#39;border-amber-400&#39;, &#39;text-white&#39;);
        }

        // --- 1. MODÜL: ÖĞREN (RENDER) ---
        function renderFlashcards() {
            const container = document.getElementById(&#39;flashcards-container&#39;);
            container.innerHTML = terms.map(term =&gt; `
                &lt;div class=&quot;group h-80 perspective-1000 cursor-pointer&quot; onclick=&quot;this.querySelector(&#39;.card-inner&#39;).classList.toggle(&#39;rotate-y-180&#39;)&quot;&gt;
                    &lt;div class=&quot;card-inner relative w-full h-full text-center transition-transform duration-700 transform-style-3d shadow-lg rounded-xl&quot;&gt;
                        &lt;!-- ÖN YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-white rounded-xl flex flex-col justify-center items-center border border-gray-200 p-4&quot;&gt;
                            &lt;div class=&quot;bg-amber-100 text-amber-700 w-16 h-16 rounded-full flex items-center justify-center mb-4 text-2xl font-bold&quot;&gt;
                                ${term.en.charAt(0)}
                            &lt;/div&gt;
                            &lt;h3 class=&quot;text-3xl font-bold text-gray-800 mb-2&quot;&gt;${term.en}&lt;/h3&gt;
                            &lt;p class=&quot;text-sm text-gray-500 italic mb-4&quot;&gt;/${term.pron}/&lt;/p&gt;
                            &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.en.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;bg-amber-700 text-white px-4 py-2 rounded-full hover:bg-amber-800 transition flex items-center gap-2&quot;&gt;
                                &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt; Dinle
                            &lt;/button&gt;
                            &lt;p class=&quot;text-xs text-gray-400 mt-6 absolute bottom-4&quot;&gt;Anlamı için tıkla&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!-- ARKA YÜZ --&gt;
                        &lt;div class=&quot;absolute w-full h-full backface-hidden bg-amber-50 rounded-xl flex flex-col justify-center items-center rotate-y-180 border border-amber-300 p-6 overflow-y-auto&quot;&gt;
                            &lt;h4 class=&quot;text-xl font-bold text-amber-900 mb-4&quot;&gt;${term.tr}&lt;/h4&gt;
                            
                            &lt;!-- Tanım Alanı --&gt;
                            &lt;div class=&quot;w-full bg-white p-3 rounded shadow-sm mb-4 flex items-start justify-between gap-2 text-left&quot;&gt;
                                &lt;p class=&quot;text-sm text-gray-600 italic&quot;&gt;&quot;${term.desc}&quot;&lt;/p&gt;
                                &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.desc.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-amber-600 hover:text-amber-800 flex-shrink-0&quot; title=&quot;Tanımı Dinle&quot;&gt;
                                    &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                            
                            &lt;!-- Örnek Cümle Alanı --&gt;
                            &lt;div class=&quot;w-full text-left&quot;&gt;
                                &lt;p class=&quot;text-xs font-bold text-gray-500 uppercase mb-1&quot;&gt;Example:&lt;/p&gt;
                                &lt;div class=&quot;flex items-start gap-2 align-top&quot;&gt;
                                    &lt;div class=&quot;tooltip-container relative inline-block flex-grow&quot;&gt;
                                        &lt;p class=&quot;text-md text-gray-800 font-medium border-b-2 border-dotted border-amber-400 cursor-help leading-relaxed&quot;&gt;
                                            &quot;${term.sample}&quot;
                                        &lt;/p&gt;
                                        &lt;span class=&quot;tooltip-text invisible opacity-0 absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-amber-800 text-white text-xs rounded py-2 px-3 transition-opacity duration-300 z-50 text-center pointer-events-none shadow-xl&quot;&gt;
                                            ${term.sampleTr}
                                            &lt;svg class=&quot;absolute text-amber-800 h-2 w-full left-0 top-full&quot; x=&quot;0px&quot; y=&quot;0px&quot; viewBox=&quot;0 0 255 255&quot;&gt;&lt;polygon class=&quot;fill-current&quot; points=&quot;0,0 127.5,127.5 255,0&quot;/&gt;&lt;/svg&gt;
                                        &lt;/span&gt;
                                    &lt;/div&gt;
                                    &lt;button onclick=&quot;event.stopPropagation(); speak(&#39;${term.sample.replace(/&#39;/g, &quot;\\&#39;&quot;)}&#39;)&quot; class=&quot;text-amber-600 hover:text-amber-800 flex-shrink-0 pt-1&quot; title=&quot;Örneği Dinle&quot;&gt;
                                        &lt;i class=&quot;fa-solid fa-volume-high&quot;&gt;&lt;/i&gt;
                                    &lt;/button&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `).join(&#39;&#39;);
        }

        // --- 2. MODÜL: ALIŞTIRMALAR ---
        function showExercise(id) {
            document.querySelectorAll(&#39;.exercise-panel&#39;).forEach(p =&gt; p.classList.add(&#39;hidden&#39;));
            document.getElementById(id).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 1: Çoktan Seçmeli
        function initMC() {
            const container = document.getElementById(&#39;mc-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                let options = [q.tr];
                while(options.length &lt; 3) {
                    let randomTerm = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(randomTerm)) options.push(randomTerm);
                }
                options = options.sort(() =&gt; 0.5 - Math.random());

                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white mc-item&quot; data-correct=&quot;${q.tr}&quot;&gt;
                        &lt;p class=&quot;font-bold text-lg mb-2&quot;&gt;&lt;span class=&quot;text-blue-600&quot;&gt;${index+1}.&lt;/span&gt; ${q.en}&lt;/p&gt;
                        &lt;div class=&quot;space-y-2&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center space-x-2 cursor-pointer hover:bg-blue-50 p-2 rounded&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;mc-q${index}&quot; value=&quot;${opt}&quot; class=&quot;form-radio text-blue-600 h-4 w-4&quot;&gt;
                                    &lt;span&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;mc-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkMC() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.mc-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;input:checked&#39;)?.value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                    item.classList.add(&#39;bg-green-50&#39;);
                } else {
                    feedback.textContent = `Yanlış. Doğru cevap: ${correct}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                    item.classList.add(&#39;bg-red-50&#39;);
                }
            });
            const resultBox = document.getElementById(&#39;mc-result&#39;);
            resultBox.textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            resultBox.classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 2: Boşluk Doldurma
        function initFITB() {
            const container = document.getElementById(&#39;fitb-container&#39;);
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            let html = &#39;&#39;;
            subset.forEach((q, index) =&gt; {
                const regex = new RegExp(q.en, &#39;gi&#39;); 
                const maskedSentence = q.sample.replace(regex, &quot;_______&quot;);
                
                html += `
                    &lt;div class=&quot;p-4 border rounded bg-white fitb-item&quot; data-correct=&quot;${q.en.toLowerCase()}&quot;&gt;
                        &lt;p class=&quot;mb-2 italic&quot;&gt;&quot;${maskedSentence}&quot;&lt;/p&gt;
                        &lt;p class=&quot;text-xs text-gray-500 mb-2&quot;&gt;(${q.tr})&lt;/p&gt;
                        &lt;select class=&quot;border p-1 rounded w-full md:w-1/2 text-sm bg-gray-50&quot;&gt;
                            &lt;option value=&quot;&quot;&gt;Seçiniz...&lt;/option&gt;
                            ${terms.map(t =&gt; `&lt;option value=&quot;${t.en.toLowerCase()}&quot;&gt;${t.en}&lt;/option&gt;`).sort().join(&#39;&#39;)}
                        &lt;/select&gt;
                        &lt;p class=&quot;text-sm mt-2 hidden feedback font-semibold&quot;&gt;&lt;/p&gt;
                    &lt;/div&gt;
                `;
            });
            container.innerHTML = html;
            document.getElementById(&#39;fitb-result&#39;).classList.add(&#39;hidden&#39;);
        }

        function checkFITB() {
            let score = 0;
            const items = document.querySelectorAll(&#39;.fitb-item&#39;);
            items.forEach(item =&gt; {
                const correct = item.getAttribute(&#39;data-correct&#39;);
                const selected = item.querySelector(&#39;select&#39;).value;
                const feedback = item.querySelector(&#39;.feedback&#39;);
                
                feedback.classList.remove(&#39;hidden&#39;, &#39;text-green-600&#39;, &#39;text-red-600&#39;);
                if (selected === correct) {
                    score++;
                    feedback.textContent = &quot;Doğru!&quot;;
                    feedback.classList.add(&#39;text-green-600&#39;);
                } else {
                    const displayCorrect = correct.charAt(0).toUpperCase() + correct.slice(1);
                    feedback.textContent = `Yanlış. Doğru cevap: ${displayCorrect}`;
                    feedback.classList.add(&#39;text-red-600&#39;);
                }
            });
            document.getElementById(&#39;fitb-result&#39;).textContent = `Sonuç: 5 üzerinden ${score} doğru.`;
            document.getElementById(&#39;fitb-result&#39;).classList.remove(&#39;hidden&#39;);
        }

        // Alıştırma 3: Eşleştirme
        let selectedLeft = null;
        let matchedPairs = 0;
        
        function initMatching() {
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 5);
            const leftContainer = document.getElementById(&#39;match-left&#39;);
            const rightContainer = document.getElementById(&#39;match-right&#39;);
            
            leftContainer.innerHTML = &#39;&#39;;
            rightContainer.innerHTML = &#39;&#39;;
            document.getElementById(&#39;match-result&#39;).textContent = &#39;&#39;;
            matchedPairs = 0;

            subset.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-left transition&#39;;
                btn.textContent = t.en;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectLeft(btn);
                leftContainer.appendChild(btn);
            });

            const shuffledRight = [...subset].sort(() =&gt; 0.5 - Math.random());
            shuffledRight.forEach(t =&gt; {
                const btn = document.createElement(&#39;button&#39;);
                btn.className = &#39;w-full text-left p-3 bg-white border border-gray-300 rounded hover:bg-gray-50 match-btn-right transition&#39;;
                btn.textContent = t.tr;
                btn.dataset.id = t.id;
                btn.onclick = () =&gt; selectRight(btn);
                rightContainer.appendChild(btn);
            });
        }

        function selectLeft(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            document.querySelectorAll(&#39;.match-btn-left&#39;).forEach(b =&gt; {
                if(!b.classList.contains(&#39;bg-green-100&#39;)) b.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            });
            btn.classList.add(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
            selectedLeft = btn;
        }

        function selectRight(btn) {
            if (btn.classList.contains(&#39;bg-green-100&#39;)) return;
            if (!selectedLeft) return;

            if (selectedLeft.dataset.id === btn.dataset.id) {
                selectedLeft.classList.remove(&#39;bg-blue-100&#39;, &#39;border-blue-500&#39;);
                selectedLeft.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                btn.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;, &#39;opacity-50&#39;, &#39;cursor-not-allowed&#39;);
                matchedPairs++;
                selectedLeft = null;
                if(matchedPairs === 5) {
                    document.getElementById(&#39;match-result&#39;).textContent = &quot;Tebrikler! Hepsini eşleştirdiniz.&quot;;
                    document.getElementById(&#39;match-result&#39;).classList.add(&#39;text-green-600&#39;);
                }
            } else {
                btn.classList.add(&#39;bg-red-100&#39;);
                setTimeout(() =&gt; btn.classList.remove(&#39;bg-red-100&#39;), 500);
            }
        }

        function resetMatching() {
            initMatching();
        }

        // --- 3. MODÜL: OYUNLAR ---
        
        // Oyun 1: Scramble
        let currentScramble = {};
        function initScramble() {
            currentScramble = terms[Math.floor(Math.random() * terms.length)];
            const word = currentScramble.en;
            const letters = word.replace(/\s/g, &#39;&#39;).split(&#39;&#39;);
            const scrambled = letters.sort(() =&gt; 0.5 - Math.random()).join(&#39;&#39;);
            
            document.getElementById(&#39;scramble-hint&#39;).textContent = currentScramble.tr;
            document.getElementById(&#39;scramble-word&#39;).textContent = scrambled.toUpperCase().split(&#39;&#39;).join(&#39; &#39;);
            document.getElementById(&#39;scramble-input&#39;).value = &#39;&#39;;
            document.getElementById(&#39;scramble-msg&#39;).textContent = &#39;&#39;;
        }

        function checkScramble() {
            const input = document.getElementById(&#39;scramble-input&#39;).value.trim().toLowerCase();
            const msg = document.getElementById(&#39;scramble-msg&#39;);
            if (input === currentScramble.en.toLowerCase()) {
                msg.textContent = &quot;Harika! Doğru bildin.&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-green-600&quot;;
                setTimeout(initScramble, 1500);
            } else {
                msg.textContent = &quot;Tekrar dene!&quot;;
                msg.className = &quot;mt-4 h-6 font-semibold text-red-600&quot;;
            }
        }

        // Oyun 2: Memory Match
        let flippedCards = [];
        let memoryScore = 0;
        
        function initMemoryGame() {
            const grid = document.getElementById(&#39;memory-grid&#39;);
            grid.innerHTML = &#39;&#39;;
            memoryScore = 0;
            document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: 0/6`;
            
            const subset = [...terms].sort(() =&gt; 0.5 - Math.random()).slice(0, 6);
            let deck = [];
            subset.forEach(item =&gt; {
                deck.push({ id: item.id, content: item.en });
                deck.push({ id: item.id, content: item.tr });
            });
            deck.sort(() =&gt; 0.5 - Math.random());
            
            deck.forEach((card, index) =&gt; {
                const el = document.createElement(&#39;div&#39;);
                el.className = &#39;bg-amber-200 rounded cursor-pointer flex items-center justify-center text-center p-1 text-xs sm:text-sm font-bold text-transparent hover:bg-amber-300 transition h-full select-none memory-card&#39;;
                el.dataset.id = card.id;
                el.innerHTML = `&lt;span class=&quot;hidden&quot;&gt;${card.content}&lt;/span&gt;`;
                el.onclick = () =&gt; flipCard(el);
                grid.appendChild(el);
            });
        }

        function flipCard(el) {
            if (el.classList.contains(&#39;bg-white&#39;) || flippedCards.length &gt;= 2) return;
            
            el.classList.remove(&#39;text-transparent&#39;, &#39;bg-amber-200&#39;);
            el.classList.add(&#39;bg-white&#39;, &#39;text-amber-800&#39;, &#39;border&#39;, &#39;border-amber-500&#39;);
            el.querySelector(&#39;span&#39;).classList.remove(&#39;hidden&#39;);
            
            flippedCards.push(el);
            
            if (flippedCards.length === 2) {
                checkMemoryMatch();
            }
        }

        function checkMemoryMatch() {
            const [card1, card2] = flippedCards;
            if (card1.dataset.id === card2.dataset.id) {
                flippedCards = [];
                memoryScore++;
                document.getElementById(&#39;memory-score&#39;).textContent = `Eşleşmeler: ${memoryScore}/6`;
                card1.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                card2.classList.add(&#39;bg-green-100&#39;, &#39;border-green-500&#39;);
                if (memoryScore === 6) {
                    setTimeout(() =&gt; alert(&quot;Tebrikler! Hafıza oyununu tamamladınız.&quot;), 500);
                }
            } else {
                setTimeout(() =&gt; {
                    card1.classList.add(&#39;text-transparent&#39;, &#39;bg-amber-200&#39;);
                    card1.classList.remove(&#39;bg-white&#39;, &#39;text-amber-800&#39;, &#39;border&#39;, &#39;border-amber-500&#39;);
                    card1.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    card2.classList.add(&#39;text-transparent&#39;, &#39;bg-amber-200&#39;);
                    card2.classList.remove(&#39;bg-white&#39;, &#39;text-amber-800&#39;, &#39;border&#39;, &#39;border-amber-500&#39;);
                    card2.querySelector(&#39;span&#39;).classList.add(&#39;hidden&#39;);
                    
                    flippedCards = [];
                }, 1000);
            }
        }

        // --- 4. MODÜL: SINAV (EXAM) ---
        function initExam() {
            document.getElementById(&#39;exam-questions&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.remove(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.add(&#39;hidden&#39;);
            
            const container = document.getElementById(&#39;exam-questions&#39;);
            container.innerHTML = &#39;&#39;;
            
            const shuffledTerms = [...terms].sort(() =&gt; 0.5 - Math.random());
            
            shuffledTerms.forEach((term, idx) =&gt; {
                let options = [term.tr];
                while(options.length &lt; 4) {
                    let rand = terms[Math.floor(Math.random() * terms.length)].tr;
                    if(!options.includes(rand)) options.push(rand);
                }
                options.sort(() =&gt; 0.5 - Math.random());
                
                const qHtml = `
                    &lt;div class=&quot;exam-question-card bg-gray-50 p-6 rounded-lg border border-gray-200&quot; data-id=&quot;${term.id}&quot;&gt;
                        &lt;div class=&quot;flex justify-between items-start mb-4&quot;&gt;
                            &lt;h3 class=&quot;font-bold text-lg text-gray-800&quot;&gt;Soru ${idx+1}&lt;/h3&gt;
                            &lt;span class=&quot;text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded&quot;&gt;Kelime Anlamı&lt;/span&gt;
                        &lt;/div&gt;
                        &lt;p class=&quot;mb-4 text-gray-700&quot;&gt;Aşağıdakilerden hangisi &lt;span class=&quot;font-bold text-amber-700 text-xl mx-1&quot;&gt;&quot;${term.en}&quot;&lt;/span&gt; teriminin doğru karşılığıdır?&lt;/p&gt;
                        
                        &lt;div class=&quot;grid grid-cols-1 md:grid-cols-2 gap-3&quot;&gt;
                            ${options.map(opt =&gt; `
                                &lt;label class=&quot;flex items-center p-3 border rounded cursor-pointer hover:bg-white hover:shadow-sm transition bg-white&quot;&gt;
                                    &lt;input type=&quot;radio&quot; name=&quot;exam-q-${term.id}&quot; value=&quot;${opt}&quot; class=&quot;h-4 w-4 text-amber-600 focus:ring-amber-500&quot;&gt;
                                    &lt;span class=&quot;ml-2 text-sm text-gray-700&quot;&gt;${opt}&lt;/span&gt;
                                &lt;/label&gt;
                            `).join(&#39;&#39;)}
                        &lt;/div&gt;
                    &lt;/div&gt;
                `;
                container.innerHTML += qHtml;
            });
        }

        function finishExam() {
            const questionCards = document.querySelectorAll(&#39;.exam-question-card&#39;);
            let correctCount = 0;
            let wrongAnswers = [];
            
            questionCards.forEach(card =&gt; {
                const termId = parseInt(card.getAttribute(&#39;data-id&#39;));
                const originalTerm = terms.find(t =&gt; t.id === termId);
                const selected = card.querySelector(&#39;input:checked&#39;)?.value;
                
                if (selected === originalTerm.tr) {
                    correctCount++;
                } else {
                    wrongAnswers.push({
                        en: originalTerm.en,
                        correctTr: originalTerm.tr,
                        userAnswer: selected || &quot;Boş bırakıldı&quot;,
                        desc: originalTerm.desc
                    });
                }
            });
            
            document.getElementById(&#39;exam-questions&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-controls&#39;).classList.add(&#39;hidden&#39;);
            document.getElementById(&#39;exam-result-screen&#39;).classList.remove(&#39;hidden&#39;);
            
            const score = Math.round((correctCount / terms.length) * 100);
            document.getElementById(&#39;exam-score-display&#39;).textContent = score;
            
            const title = document.getElementById(&#39;exam-feedback-title&#39;);
            const msg = document.getElementById(&#39;exam-feedback-msg&#39;);
            
            if(score === 100) { title.textContent = &quot;Mükemmel!&quot;; title.className=&quot;text-2xl font-bold mb-2 text-green-600&quot;; msg.textContent = &quot;Tüm terimleri eksiksiz biliyorsun.&quot;; }
            else if(score &gt;= 70) { title.textContent = &quot;Tebrikler&quot;; title.className=&quot;text-2xl font-bold mb-2 text-blue-600&quot;; msg.textContent = &quot;Gayet iyi bir sonuç, küçük hataları gözden geçir.&quot;; }
            else { title.textContent = &quot;Çalışmaya Devam&quot;; title.className=&quot;text-2xl font-bold mb-2 text-orange-600&quot;; msg.textContent = &quot;Terimlerin üzerinden tekrar geçmende fayda var.&quot;; }
            
            const wrongBox = document.getElementById(&#39;wrong-answers-box&#39;);
            const wrongList = document.getElementById(&#39;wrong-answers-list&#39;);
            wrongList.innerHTML = &#39;&#39;;
            
            if(wrongAnswers.length &gt; 0) {
                wrongBox.classList.remove(&#39;hidden&#39;);
                wrongAnswers.forEach(w =&gt; {
                    wrongList.innerHTML += `
                        &lt;li class=&quot;border-b border-red-100 pb-2 last:border-0&quot;&gt;
                            &lt;span class=&quot;font-bold text-gray-800&quot;&gt;${w.en}:&lt;/span&gt; 
                            &lt;span class=&quot;text-green-700 font-medium&quot;&gt;${w.correctTr}&lt;/span&gt; 
                            &lt;span class=&quot;text-xs text-red-500 block&quot;&gt;Sizin yanıtınız: ${w.userAnswer}&lt;/span&gt;
                            &lt;span class=&quot;text-xs text-gray-500 italic&quot;&gt;${w.desc}&lt;/span&gt;
                        &lt;/li&gt;
                    `;
                });
            } else {
                wrongBox.classList.add(&#39;hidden&#39;);
            }
        }

        // --- INIT ---
        window.onload = function() {
            renderFlashcards();
            initMC();
            initFITB();
            initMatching();
            initScramble();
            initMemoryGame();
            initExam();
        };

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</content><link rel='replies' type='application/atom+xml' href='http://hukuk-ingilizcesi.blogspot.com/feeds/6201192831121880181/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/copyright-ii-telif-hakki-ii.html#comment-form' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/6201192831121880181'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/2790250778564958355/posts/default/6201192831121880181'/><link rel='alternate' type='text/html' href='http://hukuk-ingilizcesi.blogspot.com/2026/01/copyright-ii-telif-hakki-ii.html' title='COPYRIGHT II – TELİF HAKKI II '/><author><name>E* R* Ş*</name><uri>http://www.blogger.com/profile/12217230332790736430</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>