`).join('');
}
// --- FILTERS & SEARCH ---
function filterVerbs(cat) {
document.querySelectorAll('.category-pill').forEach(el => {
el.classList.toggle('active', el.innerText.includes(cat) || (cat==='All' && el.innerText.includes('All')));
});
const filtered = cat === 'All' ? [...verbsData] : verbsData.filter(v => v.cat === cat);
renderVerbs(filtered);
}
document.getElementById('searchInput').addEventListener('input', (e) => {
const val = e.target.value.toLowerCase();
const results = verbsData.filter(v =>
v.v1.toLowerCase().includes(val) ||
v.bn[0].includes(val)
);
renderVerbs(results);
});
// --- QUIZ ENGINE ---
let qIdx = 0, qScore = 0, qPool = [];
function initQuiz() {
qIdx = 0; qScore = 0;
qPool = [...verbsData].sort(() => 0.5 - Math.random()).slice(0, 10);
showQuestion();
document.getElementById('quizSection').scrollIntoView({ behavior: 'smooth' });
}
function showQuestion() {
const container = document.getElementById('quizContent');
if(qIdx >= qPool.length) { renderResults(); return; }
const verb = qPool[qIdx];
const isV2 = Math.random() > 0.5;
const target = isV2 ? 'V2 (Past)' : 'V3 (Participle)';
const correct = isV2 ? verb.v2 : verb.v3;
let opts = [correct];
while(opts.length < 4) {
let r = verbsData[Math.floor(Math.random() * verbsData.length)];
let w = isV2 ? r.v2 : r.v3;
if(!opts.includes(w)) opts.push(w);
}
opts.sort(() => 0.5 - Math.random());
container.innerHTML = `
`;
}
function handleAns(btn, sel, cor) {
const btns = btn.parentElement.querySelectorAll('button');
btns.forEach(b => b.disabled = true);
if(sel === cor) { btn.classList.add('ans-correct'); qScore++; }
else { btn.classList.add('ans-wrong'); btns.forEach(b => { if(b.innerText === cor) b.classList.add('ans-correct'); }); }
setTimeout(() => { qIdx++; showQuestion(); }, 1200);
}
function renderResults() {
const container = document.getElementById('quizContent');
const percent = (qScore / 10) * 100;
container.innerHTML = `
${percent >= 80 ? '👑' : percent >= 50 ? '🎯' : '📚'}
Challenge Over!
Score: ${qScore} / 10
`;
}
const heartbeat = setInterval(() => {
const g = document.getElementById('verbGrid');
if(g && g.children.length === 0) renderVerbs(verbsData);
else if (g && g.children.length > 0) clearInterval(heartbeat);
}, 800);
window.onload = () => renderVerbs(verbsData);