1. ${highlightVerb(s1, verb.forms[0], 'highlight-v1')}
2. ${highlightVerb(s2, verb.forms[1], 'highlight-v2')}
3. ${highlightVerb(s3, verb.forms[2], 'highlight-v3')}
`;
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);
}
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
"?`;
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 && quiz.currentIdx < quiz.questions.length) 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);
}
});