Ödev 1

.kelime-listesi { display: flex; flex-direction: column; gap: 10px; max-width: 1000px; width: 100%; background: #ffffff; padding: 15px; border-radius: 10px; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); } .kelime-kapsayici { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; background: #f9f9f9; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1); } .ses-butonu { width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .ses-butonu img { width: 30px; height: 30px; transition: opacity 0.3s ease; } .ses-butonu img.ses-acik { display: none; } .ses-butonu.calıyor img.ses-kapali { display: none; } .ses-butonu.calıyor img.ses-acik { display: inline; } .kelime-metin { font-size: 18px; font-weight: bold; color: #333; } .kelime-anlam { font-size: 16px; color: #666; font-style: italic; } el cenicero (Kül tablası) el vaso (Bardak) la puerta (Kapı) la mesa (Masa) la bolsa (Çanta) el árbol (Ağaç) la lámpara (Lamba) el comandante (Komutan) el nacionalista (Milliyetçi) el motociclista (Motosikletçi) const sesOynatici = document.getElementById('sesOynatici'); const butonlar = document.querySelectorAll('.ses-butonu'); let suanCalanButon = null; butonlar.forEach(buton => { buton.addEventListener('click', () => { if (!sesOynatici.paused && suanCalanButon !== buton) return; if (suanCalanButon === buton) { sesOynatici.pause(); sesOynatici.currentTime = 0; buton.classList.remove('calıyor'); suanCalanButon = null; } else { if (suanCalanButon) { suanCalanButon.classList.remove('calıyor'); } suanCalanButon = buton; sesOynatici.src = buton.getAttribute('data-ses'); sesOynatici.play(); buton.classList.add('calıyor'); } }); }); sesOynatici.addEventListener('ended', () => { if (suanCalanButon) { suanCalanButon.classList.remove('calıyor'); } suanCalanButon = null; }); 4 aşamadan oluşan çalışmanın ilk bölümüne hoşgeldiniz. Kelimeleri doğru bir şekilde eşleştirip ikinci bölüme geçiniz. /* Global reset - body'ye dokunmuyoruz */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Uygulama kapsayıcısı */ .isp-app-container { max-width: 900px; width: 100%; margin: 30px auto; /* Ortalamak için üst-alt 30px boşluk */ font-family: 'Segoe UI', Roboto, 'Open Sans', sans-serif; background: #F5F7FA; /* Hafif gri/mavi arkaplan */ border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; } /* Başlık */ .isp-title { text-align: center; font-size: 1.8rem; color: #333; margin-bottom: 20px; } /* Slaytlar */ .isp-slide { display: none; margin-bottom: 30px; animation: isp-fadeIn 0.4s ease-in-out; } .isp-active { display: block; } @keyframes isp-fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Kart görünümü: Her slaytın ana kartı */ .isp-slide-card { background-color: #fff; border-radius: 10px; padding: 20px 25px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .isp-slide-card h2 { font-size: 1.4rem; margin-bottom: 10px; color: #2c3e50; } .isp-slide-card p { margin-bottom: 16px; color: #555; line-height: 1.4; } /* "Devam" vb. butonlar */ .isp-next-btn { margin-top: 20px; padding: 12px 20px; cursor: pointer; border-radius: 8px; border: none; background-color: #47A868; /* Yeşil ton */ color: #fff; font-size: 1rem; font-weight: 600; transition: background-color 0.3s, transform 0.1s; display: inline-block; } .isp-next-btn:hover { background-color: #3c9460; transform: scale(1.02); } .isp-hidden { display: none !important; } /* 1. Adım -> Eşleştirme listesi */ .isp-word-list { display: flex; flex-wrap: wrap; gap: 40px; margin: 10px 0; justify-content: space-around; } .isp-word-column { flex: 1 1 250px; display: flex; flex-direction: column; gap: 10px; } /* Eşleştirme kelime kutuları */ .isp-word { padding: 12px; text-align: center; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9; cursor: pointer; font-size: 1rem; transition: background-color 0.3s, transform 0.1s; } .isp-word:hover { background-color: #f0f0f0; transform: scale(1.02); } .isp-matched { background-color: #d2f8d2 !important; pointer-events: none; transition: none; } .isp-incorrect { background-color: #f5baba; animation: isp-shake 0.3s; } @keyframes isp-shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } .isp-selected { background-color: #e0f0ff; } /* 2, 3 ve 4. Adım -> Her bir soru için mini kart */ .isp-question-card { background: #FAFAFD; /* Hafif gri ton */ border: 1px solid #eaeaea; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; } /* Soru metni */ .isp-question-card span { flex: 0 0 auto; min-width: 160px; font-weight: 500; color: #2c3e50; font-size: 1rem; } /* Cevap metin kutusu */ .isp-question-card input[type="text"] { padding: 8px; font-size: 1rem; width: 200px; border: 1px solid #ccc; border-radius: 4px; transition: background-color 0.3s, box-shadow 0.2s; } .isp-question-card input[type="text"]:focus { outline: none; box-shadow: 0 0 3px rgba(70,140,255,0.3); } /* Doğru/yanlış cevap renkleri */ .isp-correct-input { background-color: #d2f8d2 !important; } .isp-wrong-input { background-color: #f5baba !important; animation: isp-shake 0.3s; } /* Kontrol et butonları */ .isp-question-card button { padding: 8px 16px; cursor: pointer; border-radius: 6px; border: none; background-color: #666; color: #fff; font-size: 0.9rem; font-weight: 500; transition: background-color 0.2s, transform 0.1s; } .isp-question-card button:hover { background-color: #555; transform: scale(1.03); } /* Özel karakter butonları (3. adım) */ .isp-special-chars { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } .isp-special-chars button { padding: 6px 12px; cursor: pointer; border-radius: 6px; border: 1px solid #ccc; background-color: #f9f9f9; transition: background-color 0.2s, transform 0.1s; } .isp-special-chars button:hover { background-color: #eee; transform: scale(1.05); } /* Final (5. adım) */ .isp-final-message { text-align: center; font-size: 1.2rem; color: #333; margin-top: 10px; } 1. Adım - Kelimeleri Eşleştirin Solda İspanyolca kelimeler, sağda Türkçe anlamları var. İkisine de tıklayarak doğru eşleşmeyi bulun. Devam 2. Adım - İspanyolca Kelimeyi Gör, Türkçesini Yaz Devam 3. Adım - Türkçe Kelimeyi Gör, İspanyolcasını Yaz Özel karakterler: á é í ó ú ü ñ Devam 4. Adım - Artikelleri Yazın (Örnek: "el", "la", "los", "las" vb.) Dersi Bitir Tebrikler! Tüm aşamaları başarıyla tamamladınız. /* --- GLOBAL DEĞİŞKENLER --- */ // lastFocusedInput: Kullanıcının en son odaklandığı input let lastFocusedInput = null; // Kelime listesi const words = [ { spanish: 'cenicero', turkish: 'küllük', article: 'el' }, { spanish: 'vaso', turkish: 'bardak', article: 'el' }, { spanish: 'puerta', turkish: 'kapı', article: 'la' }, { spanish: 'mesa', turkish: 'masa', article: 'la' }, { spanish: 'bolsa', turkish: 'çanta', article: 'la' }, { spanish: 'árbol', turkish: 'ağaç', article: 'el' }, { spanish: 'lampara', turkish: 'lamba', article: 'la' }, { spanish: 'comandante', turkish: 'komutan', article: 'el' }, { spanish: 'nacionalista', turkish: 'milliyetçi', article: 'el' }, { spanish: 'motociclista', turkish: 'motosikletçi', article: 'el' } ]; /* Kullanıcı bir input'a tıkladığında lastFocusedInput değişsin */ function addFocusListenerToInput(inputEl) { inputEl.addEventListener('focus', () => { lastFocusedInput = inputEl; }); } /* Özel karakter ekleme (3. adım) */ function insertChar(char) { if (lastFocusedInput) { const start = lastFocusedInput.selectionStart; const end = lastFocusedInput.selectionEnd; const text = lastFocusedInput.value; lastFocusedInput.value = text.slice(0, start) + char + text.slice(end); // Yeni imleç konumu lastFocusedInput.selectionStart = lastFocusedInput.selectionEnd = start + char.length; lastFocusedInput.focus(); } else { alert("Önce metin kutusuna tıklayarak imleci yerleştirin."); } } /* --- 1. ADIM: EŞLEŞTİRME --- */ const spanishListEl = document.getElementById('spanishList'); const turkishListEl = document.getElementById('turkishList'); let selectedSpanishIndex = null; let matchedCount = 0; function initSlide1() { const shuffledSpanish = [...words].sort(() => Math.random() - 0.5); const shuffledTurkish = [...words].sort(() => Math.random() - 0.5); shuffledSpanish.forEach(wordObj => { const div = document.createElement('div'); div.classList.add('isp-word'); div.textContent = wordObj.spanish; div.dataset.originalIndex = words.findIndex(w => w.spanish === wordObj.spanish); div.addEventListener('click', onSpanishClick); spanishListEl.appendChild(div); }); shuffledTurkish.forEach(wordObj => { const div = document.createElement('div'); div.classList.add('isp-word'); div.textContent = wordObj.turkish; div.dataset.originalIndex = words.findIndex(w => w.turkish === wordObj.turkish); div.addEventListener('click', onTurkishClick); turkishListEl.appendChild(div); }); } function onSpanishClick(e) { const allSpanishWords = spanishListEl.querySelectorAll('.isp-word'); allSpanishWords.forEach(item => item.classList.remove('isp-selected', 'isp-incorrect')); if(!e.target.classList.contains('isp-matched')) { e.target.classList.add('isp-selected'); selectedSpanishIndex = e.target.dataset.originalIndex; } else { selectedSpanishIndex = null; } } function onTurkishClick(e) { if(selectedSpanishIndex === null) return; const turkishIndex = e.target.dataset.originalIndex; const selectedSpanishWord = words[selectedSpanishIndex]; const selectedTurkishWord = words[turkishIndex]; if(selectedSpanishWord.turkish !== selectedTurkishWord.turkish) { e.target.classList.add('isp-incorrect'); setTimeout(() => e.target.classList.remove('isp-incorrect'), 400); return; } const allSpanishWords = spanishListEl.querySelectorAll('.isp-word'); allSpanishWords.forEach(item => { if(item.dataset.originalIndex == selectedSpanishIndex) { item.classList.add('isp-matched'); item.removeEventListener('click', onSpanishClick); } }); e.target.classList.add('isp-matched'); e.target.removeEventListener('click', onTurkishClick); matchedCount++; selectedSpanishIndex = null; if(matchedCount === words.length) { document.getElementById('nextBtn1').classList.remove('isp-hidden'); } } /* --- 2. ADIM: İspanyolca -> Türkçe Yazma --- */ const spanishToTurkishContainer = document.getElementById('spanishToTurkishContainer'); let currentIndexST = 0; function initSlide2() { spanishToTurkishContainer.innerHTML = ''; currentIndexST = 0; createSpanishToTurkishInput(); } function createSpanishToTurkishInput() { if(currentIndexST >= words.length) { document.getElementById('nextBtn2').classList.remove('isp-hidden'); return; } const wrapper = document.createElement('div'); wrapper.classList.add('isp-question-card'); const label = document.createElement('span'); label.textContent = `Kelime: ${words[currentIndexST].spanish} => Türkçesi:`; const input = document.createElement('input'); input.type = 'text'; addFocusListenerToInput(input); // Odak takip const button = document.createElement('button'); button.textContent = 'Kontrol Et'; button.addEventListener('click', () => { checkSpanishToTurkish(input, wrapper); }); wrapper.appendChild(label); wrapper.appendChild(input); wrapper.appendChild(button); spanishToTurkishContainer.appendChild(wrapper); } function checkSpanishToTurkish(inputEl, wrapper) { const userAnswer = inputEl.value.trim().toLowerCase(); const correctAnswer = words[currentIndexST].turkish.toLowerCase(); if(userAnswer === correctAnswer) { inputEl.classList.remove('isp-wrong-input'); inputEl.classList.add('isp-correct-input'); setTimeout(() => { wrapper.remove(); currentIndexST++; createSpanishToTurkishInput(); }, 700); } else { inputEl.classList.remove('isp-correct-input'); inputEl.classList.add('isp-wrong-input'); } } /* --- 3. ADIM: Türkçe -> İspanyolca Yazma --- */ const turkishToSpanishContainer = document.getElementById('turkishToSpanishContainer'); let currentIndexTS = 0; function initSlide3() { turkishToSpanishContainer.innerHTML = ''; currentIndexTS = 0; createTurkishToSpanishInput(); } function createTurkishToSpanishInput() { if(currentIndexTS >= words.length) { document.getElementById('nextBtn3').classList.remove('isp-hidden'); return; } const wrapper = document.createElement('div'); wrapper.classList.add('isp-question-card'); const label = document.createElement('span'); label.textContent = `Kelime: ${words[currentIndexTS].turkish} => İspanyolcası:`; const input = document.createElement('input'); input.type = 'text'; addFocusListenerToInput(input); // Odak takip const button = document.createElement('button'); button.textContent = 'Kontrol Et'; button.addEventListener('click', () => { checkTurkishToSpanish(input, wrapper); }); wrapper.appendChild(label); wrapper.appendChild(input); wrapper.appendChild(button); turkishToSpanishContainer.appendChild(wrapper); } function checkTurkishToSpanish(inputEl, wrapper) { const userAnswer = inputEl.value.trim().toLowerCase(); const correctAnswer = words[currentIndexTS].spanish.toLowerCase(); if(userAnswer === correctAnswer) { inputEl.classList.remove('isp-wrong-input'); inputEl.classList.add('isp-correct-input'); setTimeout(() => { wrapper.remove(); currentIndexTS++; createTurkishToSpanishInput(); }, 700); } else { inputEl.classList.remove('isp-correct-input'); inputEl.classList.add('isp-wrong-input'); } } /* --- 4. ADIM: Artikelleri Yazma --- */ const articleContainer = document.getElementById('articleContainer'); let currentIndexArt = 0; function initSlide4() { articleContainer.innerHTML = ''; currentIndexArt = 0; createArticleInput(); } function createArticleInput() { if(currentIndexArt >= words.length) { document.getElementById('finishBtn').classList.remove('isp-hidden'); return; } const wrapper = document.createElement('div'); wrapper.classList.add('isp-question-card'); const label = document.createElement('span'); label.textContent = `Kelime: ${words[currentIndexArt].spanish} => Artikeli:`; const input = document.createElement('input'); input.type = 'text'; addFocusListenerToInput(input); // Odak takip const button = document.createElement('button'); button.textContent = 'Kontrol Et'; button.addEventListener('click', () => { checkArticle(input, wrapper); }); wrapper.appendChild(label); wrapper.appendChild(input); wrapper.appendChild(button); articleContainer.appendChild(wrapper); } function checkArticle(inputEl, wrapper) { const userAnswer = inputEl.value.trim().toLowerCase(); const correctAnswer = words[currentIndexArt].article.toLowerCase(); if(userAnswer === correctAnswer) { inputEl.classList.remove('isp-wrong-input'); inputEl.classList.add('isp-correct-input'); setTimeout(() => { wrapper.remove(); currentIndexArt++; createArticleInput(); }, 700); } else { inputEl.classList.remove('isp-correct-input'); inputEl.classList.add('isp-wrong-input'); } } /* --- Slayt Geçişleri --- */ document.getElementById('nextBtn1').addEventListener('click', () => { document.getElementById('slide-1').classList.remove('isp-active'); document.getElementById('slide-2').classList.add('isp-active'); initSlide2(); }); document.getElementById('nextBtn2').addEventListener('click', () => { document.getElementById('slide-2').classList.remove('isp-active'); document.getElementById('slide-3').classList.add('isp-active'); initSlide3(); }); document.getElementById('nextBtn3').addEventListener('click', () => { document.getElementById('slide-3').classList.remove('isp-active'); document.getElementById('slide-4').classList.add('isp-active'); initSlide4(); }); document.getElementById('finishBtn').addEventListener('click', () => { document.getElementById('slide-4').classList.remove('isp-active'); document.getElementById('slide-5').classList.add('isp-active'); }); /* Uygulama ilk yüklendiğinde 1. slaytı hazırla */ initSlide1();

İlgili Makaleler

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