`;
verbGrid.appendChild(card);
});
if (data.length === 0) {
verbGrid.innerHTML = `
What is the ${target} form of
`;
}
function check(sel, corr) {
const isCorr = sel === corr;
if (isCorr) quizState.score++;
const container = document.getElementById('quizContainer');
container.innerHTML = `
`;
setTimeout(() => {
quizState.idx++;
quizState.idx < 10 ? showQuestion() : results();
}, 1200);
}
function results() {
document.getElementById('quizContainer').innerHTML = `
`;
}
window.addEventListener('load', initApp);
No results found.
`;
}
}
function setupSearch() {
searchInput.addEventListener('input', (e) => {
const term = e.target.value.toLowerCase();
const filtered = verbData.filter(v =>
v.v1.toLowerCase().includes(term) ||
v.v1_bn.includes(term) ||
v.cat.toLowerCase().includes(term)
);
renderVerbs(filtered);
});
}
function filterVerbs(category) {
const buttons = document.querySelectorAll('#filterContainer button');
buttons.forEach(btn => btn.className = "px-5 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold text-sm transition-all");
if(category !== 'all') event.target.className = "px-5 py-2 rounded-lg bg-blue-600 text-white font-bold text-sm shadow-md transition-all";
else buttons[0].className = "px-5 py-2 rounded-lg bg-blue-600 text-white font-bold text-sm shadow-md transition-all";
const filtered = category === 'all' ? verbData : verbData.filter(v => v.cat === category);
renderVerbs(filtered);
}
let quizState = { q: [], idx: 0, score: 0 };
function startQuiz() {
const shuffled = [...verbData].sort(() => 0.5 - Math.random());
quizState = { q: shuffled.slice(0, 10), idx: 0, score: 0 };
showQuestion();
document.getElementById('challengeZone').scrollIntoView({ behavior: 'smooth' });
}
function showQuestion() {
const verb = quizState.q[quizState.idx];
const isV2 = Math.random() > 0.5;
const target = isV2 ? 'V2 (Simple Past)' : 'V3 (Past Participle)';
const correct = isV2 ? verb.v2 : verb.v3;
let distractors = verbData.map(v => isV2 ? v.v2 : v.v3).filter(a => a !== correct);
distractors = [...new Set(distractors)].sort(() => 0.5 - Math.random()).slice(0, 3);
const options = [correct, ...distractors].sort(() => 0.5 - Math.random());
document.getElementById('quizContainer').innerHTML = `
${Array.from({length: 10}).map((_, i) => `
`).join('')}
Question ${quizState.idx + 1} / 10
What is the ${target} form of
"${verb.v1}"?
${options.map(opt => `
`).join('')}
${isCorr ? 'Correct! 🌟' : 'Oops! 😅'}
The correct answer: ${corr}
${quizState.score} / 10
You've mastered ${quizState.score * 10}% of the verbs in this round!