Basic English for French Speaker

let state = { index: 0, totalCorrect: 0, totalAttempted: 0 };

const lessonArea = document.getElementById('plLessonArea'); const quizArea = document.getElementById('plQuizArea'); const message = document.getElementById('plMessage'); const progress = document.getElementById('plProgress'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const restartBtn = document.getElementById('restartBtn');

function renderLesson() { const l = lessons[state.index]; progress.textContent = `Lesson ${state.index + 1} / ${lessons.length} — ${l.title}`; lessonArea.innerHTML = ''; quizArea.innerHTML = ''; message.textContent = '';

// Lesson header const header = document.createElement('div'); header.className = 'pl-sub'; header.textContent = l.title; lessonArea.appendChild(header);

// Words l.items.forEach(item => { const row = document.createElement('div'); row.className = 'pl-word'; row.innerHTML = `

`; lessonArea.appendChild(row); });

// Create quiz area if (l.quiz && l.quiz.length > 0) { renderQuiz(l.quiz); } else { quizArea.innerHTML = '

'; } }

function renderQuiz(quizItems) { quizArea.innerHTML = ''; quizItems.forEach((qObj, qIndex) => { const qWrap = document.createElement('div'); qWrap.className = 'pl-quiz-item'; qWrap.innerHTML = `

`; const options = document.createElement('div'); options.className = 'pl-options'; qObj.choices.forEach((choice, idx) => { const opt = document.createElement('button'); opt.className = 'pl-option'; opt.type = 'button'; opt.textContent = choice; opt.dataset.correct = (idx === qObj.a) ? '1' : '0'; opt.addEventListener('click', (e) => handleAnswer(e, opt, qObj)); options.appendChild(opt); }); qWrap.appendChild(options); quizArea.appendChild(qWrap); }); }

function handleAnswer(e, el, qObj) { // Disable choices for this question after selection const parent = el.parentElement; Array.from(parent.children).forEach(btn => btn.disabled = true);

const correct = el.dataset.correct === '1'; state.totalAttempted++; if (correct) { el.classList.add('correct'); message.textContent = "Correct — Good job!"; state.totalCorrect++; } else { el.classList.add('wrong'); message.textContent = `Try again — the correct answer is: "${qObj.choices[qObj.a]}"`; // highlight correct option const correctBtn = Array.from(parent.children).find(b => b.dataset.correct === '1'); if (correctBtn) correctBtn.classList.add('correct'); }

updateProgressSummary(); }

function updateProgressSummary() { const percent = state.totalAttempted === 0 ? 0 : Math.round((state.totalCorrect / state.totalAttempted) * 100); // keep short summary in header area const l = lessons[state.index]; progress.textContent = `Lesson ${state.index + 1} / ${lessons.length} — ${l.title} — Score: ${state.totalCorrect}/${state.totalAttempted} (${percent}%)`; }

// Controls prevBtn.addEventListener('click', () => { if (state.index > 0) { state.index--; resetSession(); renderLesson(); } }); nextBtn.addEventListener('click', () => { if (state.index < lessons.length - 1) { state.index++; resetSession(); renderLesson(); } }); restartBtn.addEventListener('click', () => { resetSession(); renderLesson(); });

function resetSession() { state.totalCorrect = 0; state.totalAttempted = 0; message.textContent = ''; }

// Initialize renderLesson();