`; grid.appendChild(card); }); } function filterVerbs(cat) { currentFilter = cat; document.querySelectorAll('.filter-btn').forEach(btn => { btn.classList.toggle('active-filter', btn.innerText.includes(cat)); }); updateView(); } function updateView() { const query = document.getElementById('searchInput')?.value.toLowerCase() || ""; const filtered = VERB_DATA.filter(verb => { const searchStr = `${verb.v1} ${verb.v1M} ${verb.cat}`.toLowerCase(); return searchStr.includes(query) && (currentFilter === 'All' || verb.cat === currentFilter); }); renderVerbs(filtered); } // Quiz System let quiz = { questions: [], currentIdx: 0, score: 0 }; function startQuiz() { quiz.questions = [...VERB_DATA].sort(() => 0.5 - Math.random()).slice(0, 10); quiz.currentIdx = 0; quiz.score = 0; document.getElementById('quizStart').classList.add('hidden'); document.getElementById('quizResult').classList.add('hidden'); document.getElementById('quizContent').classList.remove('hidden'); showQuestion(); } function showQuestion() { const verb = quiz.questions[quiz.currentIdx]; const qType = Math.random() > 0.5 ? 1 : 2; const typeLabel = qType === 1 ? 'V2' : 'V3'; document.getElementById('qNum').innerText = quiz.currentIdx + 1; document.getElementById('qScore').innerText = quiz.score; document.getElementById('qText').innerHTML = `What is the ${typeLabel} form of "${verb.v1}"?`; let options = [verb.forms[qType]]; const pool = VERB_DATA.filter(v => v.v1 !== verb.v1).map(v => v.forms[qType]); while(options.length < 4) { const r = pool[Math.floor(Math.random() * pool.length)]; if(!options.includes(r)) options.push(r); } options.sort(() => 0.5 - Math.random()); const container = document.getElementById('qOptions'); container.innerHTML = ''; options.forEach(opt => { const b = document.createElement('button'); b.className = "w-full p-3 text-left rounded-lg border border-slate-200 hover:border-brand-primary font-bold transition-all text-base"; b.innerText = opt; b.onclick = () => { const btns = container.querySelectorAll('button'); btns.forEach(btn => btn.disabled = true); if(opt === verb.forms[qType]) { quiz.score++; b.classList.add('bg-green-50', 'border-brand-success', 'text-brand-success'); } else { b.classList.add('bg-red-50', 'border-brand-danger', 'text-brand-danger'); btns.forEach(btn => { if(btn.innerText === verb.forms[qType]) btn.classList.add('bg-green-50', 'border-brand-success', 'text-brand-success'); }); } setTimeout(() => { quiz.currentIdx++; if(quiz.currentIdx < 10) showQuestion(); else endQuiz(); }, 1200); }; container.appendChild(b); }); } function endQuiz() { document.getElementById('quizContent').classList.add('hidden'); document.getElementById('quizResult').classList.remove('hidden'); document.getElementById('finalScore').innerText = quiz.score; } const heartbeat = setInterval(() => { const grid = document.getElementById('verbsGrid'); if (grid && !appStarted) { appStarted = true; renderVerbs(VERB_DATA); document.getElementById('searchInput')?.addEventListener('input', updateView); clearInterval(heartbeat); } }, 500); window.addEventListener('load', () => { if (!appStarted) { appStarted = true; renderVerbs(VERB_DATA); document.getElementById('searchInput')?.addEventListener('input', updateView); clearInterval(heartbeat); } });