Failed to load explanation. Please try again.

'; } }); // Tab 2: Generate Quiz generateQuizBtn.addEventListener('click', async () => { if (state.quizGenerated) { if (!confirm("Are you sure you want to generate a new quiz? This will clear your current answers.")) return; } quizContent.innerHTML = ''; quizLoader.classList.remove('hidden'); generateQuizBtn.disabled = true; const prompt = `Based on the concept of "${state.concept}", create a short quiz with 3 questions to test understanding. Include 2 multiple-choice questions and 1 true-false question. For multiple-choice, provide 4 options. Return a JSON object with a "questions" array. Each object in the array must have: "question" (string), "type" ('multiple-choice' or 'true-false'), "options" (array of strings), and "answer" (the correct string from options).`; const quizData = await callGeminiAPI(prompt, true); quizLoader.classList.add('hidden'); generateQuizBtn.disabled = false; if (quizData) { try { const parsed = JSON.parse(quizData); state.quiz = parsed.questions.map(q => ({ ...q, userAnswer: null, isCorrect: null })); state.quizGenerated = true; renderQuiz(); } catch (e) { console.error("Failed to parse quiz JSON:", e); showMessage("The AI returned an invalid quiz format. Please try again."); } } }); const renderQuiz = () => { quizContent.innerHTML = ''; state.quiz.forEach((q, index) => { const questionEl = document.createElement('div'); questionEl.className = 'p-4 border rounded-lg'; let optionsHtml = ''; q.options.forEach(opt => { optionsHtml += ` ${opt}`; }); questionEl.innerHTML = `

${index + 1}. ${q.question}

`; quizContent.appendChild(questionEl); }); }; quizContent.addEventListener('change', (e) => { if (e.target.type === 'radio') { const qIndex = e.target.closest('.quiz-options').dataset.qIndex; const question = state.quiz[qIndex]; question.userAnswer = e.target.value; question.isCorrect = question.userAnswer === question.answer; const optionsContainer = e.target.closest('.quiz-options'); optionsContainer.querySelectorAll('.quiz-option').forEach(optLabel => { optLabel.classList.remove('selected', 'correct', 'incorrect'); const input = optLabel.querySelector('input'); if(input.value === question.answer) { optLabel.classList.add('correct'); } if(input.checked) { optLabel.classList.add('selected'); if(!question.isCorrect) { optLabel.classList.add('incorrect'); } } }); } }); // Tab 3: Review const renderReview = () => { if (!state.concept) { reviewTitle.textContent = "No concept learned yet."; return; } reviewTitle.textContent = `Report for: ${state.concept}`; const answeredQuestions = state.quiz.filter(q => q.userAnswer !== null); const correctAnswers = answeredQuestions.filter(q => q.isCorrect); statsAnswered.textContent = answeredQuestions.length; statsCorrect.textContent = correctAnswers.length; reviewExplanationContent.innerHTML = state.explanation.replace(/\n/g, '

') || '

No explanation was generated.

'; reviewQuizContent.innerHTML = ''; if (state.quiz.length > 0) { state.quiz.forEach((q, index) => { const resultEl = document.createElement('div'); resultEl.className = 'p-3 border rounded-lg'; let resultClass = 'bg-gray-100'; let resultIcon = ''; if (q.userAnswer !== null) { resultClass = q.isCorrect ? 'bg-green-50' : 'bg-red-50'; resultIcon = q.isCorrect ? '✓' : '✗'; } resultEl.innerHTML = `

${index + 1}. ${q.question} ${resultIcon}

Correct Answer: ${q.answer}

${q.userAnswer !== null ? `

Your Answer: ${q.userAnswer}

` : '

Not answered.

'} `; resultEl.classList.add(resultClass); reviewQuizContent.appendChild(resultEl); }); } else { reviewQuizContent.innerHTML = '

No quiz was generated for this concept.

'; } }; // PDF Download downloadPdfBtn.addEventListener('click', () => { showMessage('Preparing PDF...', false); const { jsPDF } = window.jspdf; const element = document.getElementById('pdf-export-area'); html2canvas(element, { scale: 2, useCORS: true }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'in', format: 'letter' }); const pdfWidth = pdf.internal.pageSize.getWidth() - 1; const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 0.5, 0.5, pdfWidth, pdfHeight); pdf.save(`${state.concept.replace(/ /g, '_')}_Report.pdf`); showMessage('PDF downloaded successfully!', false); }).catch(err => { console.error("PDF Generation Error:", err); showMessage("An error occurred during PDF generation."); }); }); // --- INITIALIZATION --- switchTab('tab1'); });