Not enough words in the list to create a quiz (minimum 3 needed).

'; submitQuizButton.style.display = 'none'; return; } submitQuizButton.style.display = 'block'; // Shuffle the list for randomness const shuffledList = [...currentWordList].sort(() => Math.random() - 0.5); shuffledList.forEach((item, index) => { const questionDiv = document.createElement('div'); questionDiv.classList.add('quiz-question'); questionDiv.innerHTML = `

Question ${index + 1}: What is the definition of "${item.word}"?

`; // Prepare options (1 correct, 2 incorrect) const options = []; options.push({ text: item.definition, correct: true }); // Get two random incorrect definitions from other words in the list let incorrectCount = 0; const otherWords = currentWordList.filter(w => w.word !== item.word); const shuffledOthers = otherWords.sort(() => Math.random() - 0.5); for(let i=0; i < shuffledOthers.length && incorrectCount < 2; i++){ options.push({ text: shuffledOthers[i].definition, correct: false }); incorrectCount++; } // If still less than 3 options (list might be small), add dummy options while (options.length < 3) { options.push({ text: `Incorrect option ${options.length}`, correct: false }); } // Shuffle options options.sort(() => Math.random() - 0.5); const optionsDiv = document.createElement('div'); optionsDiv.classList.add('quiz-options'); options.forEach((option, optionIndex) => { const label = document.createElement('label'); const radio = document.createElement('input'); radio.type = 'radio'; radio.name = `question_${index}`; radio.value = option.correct ? 'correct' : 'incorrect'; // Store correctness in value radio.dataset.definition = option.text; // Store definition text label.appendChild(radio); label.appendChild(document.createTextNode(` ${option.text}`)); optionsDiv.appendChild(label); }); questionDiv.appendChild(optionsDiv); quizContent.appendChild(questionDiv); }); quizSection.style.display = 'block'; } startQuizButton.addEventListener('click', () => { if (currentWordList.length > 0) { generateQuiz(); } else { alert("Please select or add words to a list first."); } }); submitQuizButton.addEventListener('click', () => { let score = 0; let totalQuestions = 0; const questionGroups = quizContent.querySelectorAll('.quiz-question'); totalQuestions = questionGroups.length; if (totalQuestions === 0) return; // No quiz loaded questionGroups.forEach((questionDiv, index) => { const selectedOption = questionDiv.querySelector(`input[name="question_${index}"]:checked`); if (selectedOption && selectedOption.value === 'correct') { score++; } }); quizResult.textContent = `Quiz Finished! Your score: ${score} out of ${totalQuestions}.`; quizResult.style.display = 'block'; // Optionally scroll to results quizResult.scrollIntoView({ behavior: 'smooth' }); }); // --- PDF Download Functionality --- downloadPdfButton.addEventListener('click', () => { if (typeof jsPDF === 'undefined') { alert("Error: jsPDF library not loaded. Cannot generate PDF."); return; } if (currentWordList.length === 0) { alert("No words in the current list to download."); return; } try { const doc = new jsPDF(); const selectedLevel = levelSelect.options[levelSelect.selectedIndex].text; // --- PDF Styling (matches CSS variables) --- const primaryColor = '#3498db'; const accentColor = '#2ecc71'; // Not used directly in table, but kept for ref const textColor = '#333'; const headerColor = '#ffffff'; // White text on primary background // --- Add Title --- doc.setFontSize(18); doc.setTextColor(primaryColor); doc.text(`Vocabulary List: ${selectedLevel}`, 14, 20); // --- Prepare Table Data --- const tableColumn = ["Word", "Definition", "Example"]; const tableRows = []; currentWordList.forEach(item => { const wordData = [ item.word, item.definition, item.example || "" // Handle missing examples ]; tableRows.push(wordData); }); // --- Add Table using jsPDF-AutoTable --- doc.autoTable({ head: [tableColumn], body: tableRows, startY: 30, theme: 'grid', // 'striped', 'grid', 'plain' headStyles: { fillColor: primaryColor, // Header background color textColor: headerColor, // Header text color fontStyle: 'bold' }, styles: { cellPadding: 3, fontSize: 10, textColor: textColor, // Body text color }, alternateRowStyles: { fillColor: '#ecf0f1' // Light Gray for alternate rows (secondary color) }, columnStyles: { // Optional: Define column widths if needed // 0: { cellWidth: 40 }, // 1: { cellWidth: 'auto' }, // 2: { cellWidth: 'auto' } } }); // --- Add Footer --- const pageCount = doc.internal.getNumberOfPages(); for (let i = 1; i <= pageCount; i++) { doc.setPage(i); doc.setFontSize(9); doc.setTextColor(150); // Gray color for footer doc.text(`Page ${i} of ${pageCount} - Vocabulary Builder`, doc.internal.pageSize.width / 2, doc.internal.pageSize.height - 10, { align: 'center' }); } // --- Save PDF --- doc.save(`Vocabulary_List_${selectedLevel.replace(/\s+/g, '_')}.pdf`); } catch (error) { console.error("Error generating PDF:", error); alert("An error occurred while generating the PDF. Check the console for details."); } }); // --- Initial Setup --- loadCustomWords(); // Load custom words on script start // Display beginner list by default or prompt user // displayWordList('beginner'); // Optionally load a default list wordListDisplay.innerHTML = '

Select a level from the dropdown to get started or add your own words.

'; startQuizButton.disabled = true; // Disable buttons initially downloadPdfButton.disabled = true; // Check if 'Custom' should be default if custom words exist if (vocabulary.custom.length > 0) { levelSelect.value = 'custom'; customWordSection.classList.remove('hidden'); displayWordList('custom'); } else { levelSelect.value = 'beginner'; // Default to beginner if no custom words customWordSection.classList.add('hidden'); wordListDisplay.innerHTML = '

Select a level from the dropdown to get started or add your own words.

'; // Keep prompt }