`
};
// --- Render & Logic Functions ---
const renderCreatePanel = () => {
mainContent.innerHTML = panelTemplates.create;
addCardForm(); // Add the first card form automatically
document.getElementById('add-card-btn').addEventListener('click', addCardForm);
document.getElementById('start-studying-btn').addEventListener('click', processAndStartStudy);
};
const addCardForm = () => {
const container = document.getElementById('flashcards-container');
const cardCount = container.children.length + 1;
const newCard = document.createElement('div');
newCard.className = 'p-4 border rounded-lg bg-gray-50 grid grid-cols-1 md:grid-cols-2 gap-4';
newCard.innerHTML = `
`;
container.appendChild(newCard);
};
const processAndStartStudy = () => {
const title = document.getElementById('set-title').value.trim();
if (!title) {
alert("Please enter a title for your flashcard set.");
return;
}
const cards = [];
const cardForms = document.querySelectorAll('#flashcards-container > div');
for (const form of cardForms) {
const front = form.querySelector('.card-front-input').value.trim();
const back = form.querySelector('.card-back-input').value.trim();
if (front && back) {
cards.push({ front, back });
}
}
if (cards.length === 0) {
alert("Please create at least one flashcard.");
return;
}
flashcardSet = { title, cards };
studySession = { currentIndex: 0, knownCards: [], unknownCards: [], isFinished: false };
tabButtons[1].disabled = false;
switchToTab('study');
};
const renderStudyPanel = () => {
mainContent.innerHTML = panelTemplates.study;
renderCurrentCard();
// Event Listeners for study panel
document.getElementById('flashcard-display').addEventListener('click', (e) => e.currentTarget.classList.toggle('is-flipped'));
document.getElementById('prev-card-btn').addEventListener('click', () => navigateCard(-1));
document.getElementById('next-card-btn').addEventListener('click', () => navigateCard(1));
document.getElementById('knew-it-btn').addEventListener('click', () => markCard(true));
document.getElementById('did-not-know-btn').addEventListener('click', () => markCard(false));
document.getElementById('finish-session-btn').addEventListener('click', () => {
tabButtons[2].disabled = false;
switchToTab('results');
});
};
const renderCurrentCard = () => {
const card = flashcardSet.cards[studySession.currentIndex];
document.querySelector('.flashcard-front').textContent = card.front;
document.querySelector('.flashcard-back').textContent = card.back;
document.getElementById('progress-indicator').textContent = `Card ${studySession.currentIndex + 1} of ${flashcardSet.cards.length}`;
document.querySelector('.flashcard').classList.remove('is-flipped');
};
const navigateCard = (direction) => {
const newIndex = studySession.currentIndex + direction;
if (newIndex >= 0 && newIndex < flashcardSet.cards.length) {
studySession.currentIndex = newIndex;
renderCurrentCard();
}
};
const markCard = (known) => {
const cardIndex = studySession.currentIndex;
if (known) {
if (!studySession.knownCards.includes(cardIndex)) studySession.knownCards.push(cardIndex);
studySession.unknownCards = studySession.unknownCards.filter(i => i !== cardIndex);
} else {
if (!studySession.unknownCards.includes(cardIndex)) studySession.unknownCards.push(cardIndex);
studySession.knownCards = studySession.knownCards.filter(i => i !== cardIndex);
}
alert(`Card marked as ${known ? 'Known' : 'Unknown'}.`);
navigateCard(1); // Auto-advance to next card
};
const renderResultsPanel = () => {
mainContent.innerHTML = panelTemplates.results;
const total = flashcardSet.cards.length;
const knownCount = studySession.knownCards.length;
document.getElementById('score-display').textContent = `You marked ${knownCount} out of ${total} cards as "known".`;
const reviewContainer = document.getElementById('review-list-container');
if (studySession.unknownCards.length > 0) {
let reviewHtml = `
Cards to Review:
`;
studySession.unknownCards.forEach(index => {
const card = flashcardSet.cards[index];
reviewHtml += `
Front: ${card.front}
Back: ${card.back}
`;
});
reviewHtml += `
`;
reviewContainer.innerHTML = reviewHtml;
} else {
reviewContainer.innerHTML = `
Congratulations! You knew all the cards!
`;
}
document.getElementById('download-results-pdf').addEventListener('click', () => generatePdf('results'));
document.getElementById('download-cards-pdf').addEventListener('click', () => generatePdf('cards'));
};
const switchToTab = (tabId) => {
tabButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tabId));
if (tabId === 'create') renderCreatePanel();
else if (tabId === 'study') renderStudyPanel();
else if (tabId === 'results') renderResultsPanel();
};
// --- PDF Generation ---
const generatePdf = (type) => {
const buildResultsPdfHtml = () => {
const date = new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
const total = flashcardSet.cards.length;
const knownCount = studySession.knownCards.length;
const percentage = total > 0 ? ((knownCount / total) * 100).toFixed(0) : 0;
let reviewHtml = '';
if (studySession.unknownCards.length > 0) {
reviewHtml = `
Cards to Review
${studySession.unknownCards.map(index => {
const card = flashcardSet.cards[index];
return `
Front: ${card.front}
Back: ${card.back}
`;
}).join('')}
`;
}
return `
Study Report: ${flashcardSet.title}
Report generated on ${date}
Final Score: ${knownCount} / ${total} (${percentage}%)
${reviewHtml}
`;
};
const buildCardsPdfHtml = () => {
const cardsHtml = flashcardSet.cards.map(card => `
`).join('');
return `
${flashcardSet.title}
${cardsHtml}`;
};
pdfRenderContainer.innerHTML = type === 'results' ? buildResultsPdfHtml() : buildCardsPdfHtml();
html2canvas(pdfRenderContainer, { scale: 2, useCORS: true })
.then(canvas => {
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({ orientation: 'portrait', unit: 'px', format: 'a4' });
const imgData = canvas.toDataURL('image/png');
const pdfWidth = pdf.internal.pageSize.getWidth();
const ratio = canvas.width / canvas.height;
const pdfHeight = pdfWidth / ratio;
pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
pdf.save(`${type === 'results' ? 'Study_Report' : 'Flashcards'}_${flashcardSet.title.replace(/\s+/g, '_')}.pdf`);
});
};
// --- Initial Load ---
switchToTab('create');
});
