`; // If no weak topics, populate study zone with all topics appState.weakTopics = Object.keys(courseData[appState.selectedSubject]); } } function populateStudyZone() { const studyContainer = document.getElementById('study-flashcards'); studyContainer.innerHTML = ''; appState.weakTopics.forEach(topic => { const topicSection = document.createElement('div'); topicSection.innerHTML = `

${topic}

`; const cardsGrid = document.createElement('div'); cardsGrid.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'; courseData[appState.selectedSubject][topic].forEach(cardData => { const card = document.createElement('div'); card.className = 'flashcard-container h-40'; card.innerHTML = ` `; cardsGrid.appendChild(card); }); topicSection.appendChild(cardsGrid); studyContainer.appendChild(topicSection); }); // Add some helper CSS for the 3D flip effect const style = document.createElement('style'); style.textContent = `.transform-style-3d { transform-style: preserve-3d; } .rotate-y-180 { transform: rotateY(180deg); } .backface-hidden { backface-visibility: hidden; }`; document.head.appendChild(style); } function prepareReport() { const summaryContainer = document.getElementById('report-summary'); let totalCorrect = 0; let totalQuestions = 0; Object.values(appState.userAnswers).forEach(data => { totalCorrect += data.correct; totalQuestions += data.total; }); const overallScore = totalQuestions > 0 ? (totalCorrect / totalQuestions) * 100 : 0; summaryContainer.innerHTML = `

Subject: ${appState.selectedSubject}

Overall Score: ${overallScore.toFixed(0)}%

Topics to focus on: ${appState.weakTopics.join(', ') || 'None, great job!'}

`; // Chart const ctx = document.getElementById('progress-chart').getContext('2d'); if (appState.chartInstance) { appState.chartInstance.destroy(); } appState.chartInstance = new Chart(ctx, { type: 'bar', data: { labels: Object.keys(appState.topicScores), datasets: [{ label: 'Topic Proficiency (%)', data: Object.values(appState.topicScores), backgroundColor: Object.values(appState.topicScores).map(score => score < 75 ? '#fecaca' : '#bbf7d0'), // red-200 or green-200 borderColor: Object.values(appState.topicScores).map(score => score < 75 ? '#dc2626' : '#16a34a'), // red-600 or green-600 borderWidth: 1 }] }, options: { indexAxis: 'y', scales: { x: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: false } } } }); } // --- PDF Generation --- async function generatePdfReport() { const button = document.getElementById('download-pdf-btn'); const originalText = button.textContent; button.disabled = true; button.textContent = 'Generating...'; const canvasChart = document.getElementById('progress-chart'); const chartImage = canvasChart.toDataURL('image/png', 1.0); let totalCorrect = 0, totalQuestions = 0; Object.values(appState.userAnswers).forEach(d => { totalCorrect += d.correct; totalQuestions += d.total; }); const overallScore = totalQuestions > 0 ? (totalCorrect / totalQuestions) * 100 : 0; const reportHtml = ` `; const pdfTemplate = document.getElementById('pdf-template'); pdfTemplate.innerHTML = reportHtml; pdfTemplate.style.position = 'absolute'; pdfTemplate.style.left = '-9999px'; pdfTemplate.classList.remove('invisible'); try { const { jsPDF } = window.jspdf; const canvas = await html2canvas(pdfTemplate.querySelector('.pdf-report-container'), { scale: 2, backgroundColor: '#ffffff', useCORS: true }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight); pdf.save('Adaptive_Learning_Report.pdf'); } catch(e) { console.error(e); alert('Error generating PDF.'); } finally { pdfTemplate.style.position = ''; pdfTemplate.style.left = '-left-full'; pdfTemplate.classList.add('invisible'); button.disabled = false; button.textContent = originalText; } } init(); });