/${item.symbol}/

${item.words.map(w => `${w}`).join('')}

`; grid.appendChild(card); }); } function initQuiz() { const optionsContainer = document.getElementById('quiz-options'); optionsContainer.innerHTML = ''; vowelData.forEach(item => { const btn = document.createElement('button'); btn.className = "p-4 bg-white border-2 border-slate-100 rounded-xl text-xl font-bold hover:border-indigo-300 hover:bg-indigo-50 transition"; btn.textContent = `/${item.symbol}/`; btn.onclick = () => checkQuizAnswer(item.symbol); optionsContainer.appendChild(btn); }); nextQuizQuestion(); } function nextQuizQuestion() { const randomCategory = vowelData[Math.floor(Math.random() * vowelData.length)]; const randomWord = randomCategory.words[Math.floor(Math.random() * randomCategory.words.length)]; quizCurrentWord = { word: randomWord, symbol: randomCategory.symbol }; document.getElementById('quiz-feedback').textContent = ''; document.getElementById('quiz-feedback').className = 'mt-6 font-semibold min-h-[1.5rem]'; speak(quizCurrentWord.word, true); } function playQuizWord() { if (quizCurrentWord) speak(quizCurrentWord.word, true); } function checkQuizAnswer(selectedSymbol) { const feedback = document.getElementById('quiz-feedback'); if (selectedSymbol === quizCurrentWord.symbol) { feedback.textContent = `Dobrze! Słowo "${quizCurrentWord.word}" zawiera dźwięk /${quizCurrentWord.symbol}/`; feedback.className = "mt-6 font-semibold min-h-[1.5rem] text-emerald-600"; showMessage("Brawo!", "success"); } else { feedback.textContent = `Niestety nie. Słowo "${quizCurrentWord.word}" to dźwięk /${quizCurrentWord.symbol}/.`; feedback.className = "mt-6 font-semibold min-h-[1.5rem] text-rose-600"; showMessage("Spróbuj jeszcze raz", "error"); } } function initSort() { const wordsContainer = document.getElementById('words-to-sort'); const targetsContainer = document.getElementById('sort-targets'); wordsContainer.innerHTML = ''; targetsContainer.innerHTML = ''; let allWords = []; vowelData.slice(0, 4).forEach(cat => { cat.words.slice(0, 2).forEach(w => allWords.push({ text: w, symbol: cat.symbol })); }); allWords.sort(() => Math.random() - 0.5); allWords.forEach(wData => { const span = document.createElement('div'); span.className = "px-4 py-2 bg-white border border-slate-300 rounded-lg shadow-sm cursor-move hover:shadow-md transition font-medium"; span.textContent = wData.text; span.draggable = true; span.dataset.symbol = wData.symbol; span.addEventListener('dragstart', (e) => { e.dataTransfer.setData('text/plain', wData.text); e.dataTransfer.setData('symbol', wData.symbol); speak(wData.text); }); wordsContainer.appendChild(span); }); vowelData.slice(0, 4).forEach(item => { const zone = document.createElement('div'); zone.className = "drop-zone p-4 border-2 border-dashed border-slate-200 rounded-2xl bg-white flex flex-col items-center justify-start gap-2"; zone.innerHTML = `/${item.symbol}/`; zone.addEventListener('dragover', (e) => { e.preventDefault(); zone.classList.add('active'); }); zone.addEventListener('dragleave', () => zone.classList.remove('active')); zone.addEventListener('drop', (e) => { e.preventDefault(); zone.classList.remove('active'); const word = e.dataTransfer.getData('text/plain'); const symbol = e.dataTransfer.getData('symbol'); if (symbol === item.symbol) { const wordEl = document.createElement('div'); wordEl.className = "text-xs px-2 py-1 bg-emerald-100 text-emerald-700 rounded-md animate-bounce"; wordEl.textContent = word; zone.appendChild(wordEl); Array.from(wordsContainer.children).find(c => c.textContent === word)?.remove(); showMessage("Dobrze!", "success"); } else { showMessage("To nie ta kategoria", "error"); } }); targetsContainer.appendChild(zone); }); } function showSection(id) { document.querySelectorAll('.section').forEach(s => s.classList.add('hidden')); document.getElementById(`section-${id}`).classList.remove('hidden'); document.querySelectorAll('.nav-btn').forEach(b => { b.classList.replace('bg-indigo-600', 'bg-white'); b.classList.replace('text-white', 'text-indigo-600'); }); event.target.classList.replace('bg-white', 'bg-indigo-600'); event.target.classList.replace('text-indigo-600', 'text-white'); if (id === 'quiz') initQuiz(); if (id === 'sort') initSort(); } window.onload = () => { renderExplore(); };

Usłysz i wybierz symbol