first commit
This commit is contained in:
inubimambo
643
app.js
Normal file
643
app.js
Normal file
@@ -0,0 +1,643 @@
|
|||||||
|
// EduCat: AI Study Buddy - Main Application Logic
|
||||||
|
|
||||||
|
class EduCatApp {
|
||||||
|
constructor() {
|
||||||
|
this.uploadedFiles = [];
|
||||||
|
this.studySessions = 0;
|
||||||
|
this.quizzesCompleted = 0;
|
||||||
|
this.generatedContent = [];
|
||||||
|
this.currentTab = 'dashboard';
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.setupEventListeners();
|
||||||
|
this.updateStats();
|
||||||
|
this.updateFileSelects();
|
||||||
|
this.showTab('dashboard');
|
||||||
|
}
|
||||||
|
|
||||||
|
setupEventListeners() {
|
||||||
|
// Tab navigation
|
||||||
|
document.querySelectorAll('.nav__item').forEach(button => {
|
||||||
|
button.addEventListener('click', (e) => {
|
||||||
|
const tab = e.target.dataset.tab || 'dashboard';
|
||||||
|
this.showTab(tab);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// File upload - Fixed implementation
|
||||||
|
const uploadArea = document.getElementById('upload-area');
|
||||||
|
const fileInput = document.getElementById('file-input');
|
||||||
|
|
||||||
|
if (uploadArea && fileInput) {
|
||||||
|
uploadArea.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
fileInput.click();
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadArea.addEventListener('dragover', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
uploadArea.classList.add('drag-over');
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadArea.addEventListener('dragleave', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
uploadArea.classList.remove('drag-over');
|
||||||
|
});
|
||||||
|
|
||||||
|
uploadArea.addEventListener('drop', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
uploadArea.classList.remove('drag-over');
|
||||||
|
const files = Array.from(e.dataTransfer.files);
|
||||||
|
this.processFiles(files);
|
||||||
|
});
|
||||||
|
|
||||||
|
fileInput.addEventListener('change', (e) => {
|
||||||
|
const files = Array.from(e.target.files);
|
||||||
|
this.processFiles(files);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// AI feature buttons
|
||||||
|
document.querySelectorAll('.feature-card').forEach(card => {
|
||||||
|
const button = card.querySelector('.btn');
|
||||||
|
if (button) {
|
||||||
|
button.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const feature = card.dataset.feature;
|
||||||
|
this.generateContent(feature);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Quiz generation
|
||||||
|
const generateQuizBtn = document.getElementById('generate-quiz');
|
||||||
|
if (generateQuizBtn) {
|
||||||
|
generateQuizBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
this.generateQuiz();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Study planner interactions - Fixed implementation
|
||||||
|
this.setupPlannerEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
showTab(tabName) {
|
||||||
|
// Update navigation
|
||||||
|
document.querySelectorAll('.nav__item').forEach(item => {
|
||||||
|
item.classList.remove('active');
|
||||||
|
if (item.dataset.tab === tabName || (tabName === 'dashboard' && !item.dataset.tab)) {
|
||||||
|
item.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update content
|
||||||
|
document.querySelectorAll('.tab-content').forEach(content => {
|
||||||
|
content.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
const targetTab = tabName === 'dashboard' ? 'dashboard' : tabName;
|
||||||
|
const targetContent = document.getElementById(targetTab);
|
||||||
|
if (targetContent) {
|
||||||
|
targetContent.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.currentTab = tabName;
|
||||||
|
|
||||||
|
// Special handling for library tab
|
||||||
|
if (tabName === 'library') {
|
||||||
|
this.updateLibraryContent();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
processFiles(files) {
|
||||||
|
if (!files || files.length === 0) {
|
||||||
|
alert('No files selected.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const validFiles = files.filter(file => this.isValidFile(file));
|
||||||
|
|
||||||
|
if (validFiles.length === 0) {
|
||||||
|
alert('Please select valid file types: PDF, DOCX, PPTX, TXT, or XLSX');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validFiles.length !== files.length) {
|
||||||
|
alert('Some files were skipped due to invalid file types.');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.uploadFiles(validFiles);
|
||||||
|
}
|
||||||
|
|
||||||
|
isValidFile(file) {
|
||||||
|
const validExtensions = ['pdf', 'docx', 'pptx', 'txt', 'xlsx'];
|
||||||
|
const fileName = file.name.toLowerCase();
|
||||||
|
return validExtensions.some(ext => fileName.endsWith('.' + ext));
|
||||||
|
}
|
||||||
|
|
||||||
|
uploadFiles(files) {
|
||||||
|
const progressBar = document.getElementById('upload-progress');
|
||||||
|
const progressFill = document.getElementById('progress-fill');
|
||||||
|
const progressText = document.getElementById('progress-text');
|
||||||
|
|
||||||
|
if (progressBar) {
|
||||||
|
progressBar.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
let progress = 0;
|
||||||
|
const progressInterval = setInterval(() => {
|
||||||
|
progress += Math.random() * 20 + 5;
|
||||||
|
|
||||||
|
if (progressFill) {
|
||||||
|
progressFill.style.width = `${Math.min(progress, 100)}%`;
|
||||||
|
}
|
||||||
|
if (progressText) {
|
||||||
|
progressText.textContent = `Uploading... ${Math.round(Math.min(progress, 100))}%`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (progress >= 100) {
|
||||||
|
clearInterval(progressInterval);
|
||||||
|
this.completeUpload(files);
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
completeUpload(files) {
|
||||||
|
setTimeout(() => {
|
||||||
|
files.forEach(file => {
|
||||||
|
const fileData = {
|
||||||
|
id: Date.now() + Math.random(),
|
||||||
|
name: file.name,
|
||||||
|
size: this.formatFileSize(file.size || 50000), // Default size for demo
|
||||||
|
type: this.getFileType(file.name),
|
||||||
|
uploadDate: new Date().toLocaleDateString(),
|
||||||
|
content: this.generateMockContent(file.name)
|
||||||
|
};
|
||||||
|
this.uploadedFiles.push(fileData);
|
||||||
|
});
|
||||||
|
|
||||||
|
const progressBar = document.getElementById('upload-progress');
|
||||||
|
if (progressBar) {
|
||||||
|
progressBar.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
this.updateFileDisplay();
|
||||||
|
this.updateStats();
|
||||||
|
this.updateFileSelects();
|
||||||
|
this.addActivity(`Uploaded ${files.length} file(s)`);
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
alert(`Successfully uploaded ${files.length} file(s)!`);
|
||||||
|
|
||||||
|
// Clear file input
|
||||||
|
const fileInput = document.getElementById('file-input');
|
||||||
|
if (fileInput) {
|
||||||
|
fileInput.value = '';
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
getFileType(filename) {
|
||||||
|
const extension = filename.split('.').pop().toUpperCase();
|
||||||
|
return extension;
|
||||||
|
}
|
||||||
|
|
||||||
|
formatFileSize(bytes) {
|
||||||
|
if (bytes === 0) return '0 Bytes';
|
||||||
|
const k = 1024;
|
||||||
|
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||||
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||||
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||||
|
}
|
||||||
|
|
||||||
|
generateMockContent(filename) {
|
||||||
|
const topics = ['Mathematics', 'Science', 'History', 'Literature', 'Computer Science'];
|
||||||
|
const randomTopic = topics[Math.floor(Math.random() * topics.length)];
|
||||||
|
return {
|
||||||
|
topic: randomTopic,
|
||||||
|
keyPoints: [
|
||||||
|
`Key concept from ${filename}`,
|
||||||
|
`Important theorem or principle`,
|
||||||
|
`Practical application example`,
|
||||||
|
`Historical context or background`
|
||||||
|
]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateFileDisplay() {
|
||||||
|
const container = document.getElementById('files-container');
|
||||||
|
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.uploadedFiles.length === 0) {
|
||||||
|
container.innerHTML = '<div class="empty-state"><p>No files uploaded yet. Upload your first file to get started!</p></div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.innerHTML = this.uploadedFiles.map(file => `
|
||||||
|
<div class="file-item" data-file-id="${file.id}">
|
||||||
|
<div class="file-icon">${file.type}</div>
|
||||||
|
<div class="file-info">
|
||||||
|
<div class="file-name">${file.name}</div>
|
||||||
|
<div class="file-meta">${file.size} • ${file.uploadDate}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
updateStats() {
|
||||||
|
const filesCount = document.getElementById('files-count');
|
||||||
|
const sessionsCount = document.getElementById('sessions-count');
|
||||||
|
const quizzesCount = document.getElementById('quizzes-count');
|
||||||
|
|
||||||
|
if (filesCount) filesCount.textContent = this.uploadedFiles.length;
|
||||||
|
if (sessionsCount) sessionsCount.textContent = this.studySessions;
|
||||||
|
if (quizzesCount) quizzesCount.textContent = this.quizzesCompleted;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateFileSelects() {
|
||||||
|
const select = document.getElementById('quiz-file-select');
|
||||||
|
if (!select) return;
|
||||||
|
|
||||||
|
select.innerHTML = '<option value="">Select a file to create quiz from</option>';
|
||||||
|
|
||||||
|
this.uploadedFiles.forEach(file => {
|
||||||
|
const option = document.createElement('option');
|
||||||
|
option.value = file.id;
|
||||||
|
option.textContent = file.name;
|
||||||
|
select.appendChild(option);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addActivity(activity) {
|
||||||
|
const activityList = document.getElementById('activity-list');
|
||||||
|
if (!activityList) return;
|
||||||
|
|
||||||
|
const timestamp = new Date().toLocaleTimeString();
|
||||||
|
|
||||||
|
// Remove empty state if it exists
|
||||||
|
const emptyState = activityList.querySelector('.empty-state');
|
||||||
|
if (emptyState) {
|
||||||
|
emptyState.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
const activityItem = document.createElement('div');
|
||||||
|
activityItem.className = 'activity-item';
|
||||||
|
activityItem.innerHTML = `
|
||||||
|
<span>📝</span>
|
||||||
|
<span>${activity}</span>
|
||||||
|
<small>${timestamp}</small>
|
||||||
|
`;
|
||||||
|
|
||||||
|
activityList.insertBefore(activityItem, activityList.firstChild);
|
||||||
|
|
||||||
|
// Keep only last 5 activities
|
||||||
|
const items = activityList.querySelectorAll('.activity-item');
|
||||||
|
if (items.length > 5) {
|
||||||
|
items[items.length - 1].remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
generateContent(feature) {
|
||||||
|
if (this.uploadedFiles.length === 0) {
|
||||||
|
alert('Please upload some files first before generating content.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showLoadingModal(`Generating ${feature.replace('-', ' ')}...`);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const content = this.createMockContent(feature);
|
||||||
|
this.generatedContent.push(content);
|
||||||
|
this.hideLoadingModal();
|
||||||
|
this.updateLibraryContent();
|
||||||
|
this.addActivity(`Generated ${feature.replace('-', ' ')}`);
|
||||||
|
|
||||||
|
// Switch to library tab to show the generated content
|
||||||
|
this.showTab('library');
|
||||||
|
}, 2000 + Math.random() * 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
createMockContent(feature) {
|
||||||
|
const randomFile = this.uploadedFiles[Math.floor(Math.random() * this.uploadedFiles.length)];
|
||||||
|
const timestamp = new Date().toLocaleString();
|
||||||
|
|
||||||
|
const contentMap = {
|
||||||
|
'study-guide': {
|
||||||
|
title: `Study Guide: ${randomFile.content.topic}`,
|
||||||
|
type: 'Study Guide',
|
||||||
|
content: `
|
||||||
|
<h4>Chapter Overview</h4>
|
||||||
|
<p>This study guide covers the key concepts from ${randomFile.name}.</p>
|
||||||
|
|
||||||
|
<h4>Key Topics</h4>
|
||||||
|
<ul>
|
||||||
|
${randomFile.content.keyPoints.map(point => `<li>${point}</li>`).join('')}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h4>Study Tips</h4>
|
||||||
|
<ul>
|
||||||
|
<li>Review each section multiple times</li>
|
||||||
|
<li>Create flashcards for key terms</li>
|
||||||
|
<li>Practice with sample problems</li>
|
||||||
|
<li>Form study groups for discussion</li>
|
||||||
|
</ul>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'quiz': {
|
||||||
|
title: `Practice Quiz: ${randomFile.content.topic}`,
|
||||||
|
type: 'Quiz',
|
||||||
|
content: `
|
||||||
|
<div class="quiz-questions">
|
||||||
|
<div class="quiz-question">
|
||||||
|
<div class="question-text">1. What is the main concept discussed in the uploaded material?</div>
|
||||||
|
<div class="quiz-options-list">
|
||||||
|
<label class="quiz-option">
|
||||||
|
<input type="radio" name="q1" value="a">
|
||||||
|
<span>${randomFile.content.keyPoints[0]}</span>
|
||||||
|
</label>
|
||||||
|
<label class="quiz-option">
|
||||||
|
<input type="radio" name="q1" value="b">
|
||||||
|
<span>Alternative concept</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'summary': {
|
||||||
|
title: `Summary: ${randomFile.content.topic}`,
|
||||||
|
type: 'Summary',
|
||||||
|
content: `
|
||||||
|
<p><strong>Document:</strong> ${randomFile.name}</p>
|
||||||
|
<p><strong>Topic:</strong> ${randomFile.content.topic}</p>
|
||||||
|
|
||||||
|
<h4>Key Points Summary</h4>
|
||||||
|
<p>The main concepts covered include:</p>
|
||||||
|
<ul>
|
||||||
|
${randomFile.content.keyPoints.map(point => `<li>${point}</li>`).join('')}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p>This material provides a comprehensive overview of ${randomFile.content.topic} with practical applications and theoretical foundations.</p>
|
||||||
|
`
|
||||||
|
},
|
||||||
|
'flashcards': {
|
||||||
|
title: `Flashcards: ${randomFile.content.topic}`,
|
||||||
|
type: 'Flashcards',
|
||||||
|
content: `
|
||||||
|
<div class="flashcard-set">
|
||||||
|
${randomFile.content.keyPoints.map((point, index) => `
|
||||||
|
<div class="flashcard" style="margin-bottom: 16px; padding: 16px; border: 1px solid var(--color-border); border-radius: 8px;">
|
||||||
|
<div class="flashcard-front"><strong>Card ${index + 1}:</strong> What is ${point.toLowerCase()}?</div>
|
||||||
|
<div class="flashcard-back" style="margin-top: 8px; color: var(--color-text-secondary);">Answer: ${point}</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: Date.now() + Math.random(),
|
||||||
|
...contentMap[feature],
|
||||||
|
sourceFile: randomFile.name,
|
||||||
|
createdAt: timestamp
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
updateLibraryContent() {
|
||||||
|
const container = document.getElementById('generated-content');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
if (this.generatedContent.length === 0) {
|
||||||
|
container.style.display = 'none';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
container.style.display = 'block';
|
||||||
|
container.innerHTML = `
|
||||||
|
<h3>Generated Study Materials</h3>
|
||||||
|
${this.generatedContent.map(content => `
|
||||||
|
<div class="content-item">
|
||||||
|
<div class="content-header">
|
||||||
|
<span class="content-title">${content.title}</span>
|
||||||
|
<span class="status status--success">${content.type}</span>
|
||||||
|
</div>
|
||||||
|
<div class="content-body">
|
||||||
|
<p><small>Generated from: ${content.sourceFile} • ${content.createdAt}</small></p>
|
||||||
|
${content.content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
generateQuiz() {
|
||||||
|
const fileSelect = document.getElementById('quiz-file-select');
|
||||||
|
const questionsSelect = document.getElementById('quiz-questions');
|
||||||
|
|
||||||
|
if (!fileSelect || !fileSelect.value) {
|
||||||
|
alert('Please select a file to generate quiz from.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedFile = this.uploadedFiles.find(file => file.id == fileSelect.value);
|
||||||
|
const numQuestions = parseInt(questionsSelect.value) || 10;
|
||||||
|
|
||||||
|
this.showLoadingModal('Generating quiz questions...');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const quiz = this.createQuizQuestions(selectedFile, numQuestions);
|
||||||
|
this.displayQuiz(quiz);
|
||||||
|
this.hideLoadingModal();
|
||||||
|
this.addActivity(`Generated ${numQuestions}-question quiz`);
|
||||||
|
}, 1500 + Math.random() * 1500);
|
||||||
|
}
|
||||||
|
|
||||||
|
createQuizQuestions(file, numQuestions) {
|
||||||
|
const questions = [];
|
||||||
|
const questionTypes = [
|
||||||
|
'What is the main concept of',
|
||||||
|
'Which of the following best describes',
|
||||||
|
'What is the key principle behind',
|
||||||
|
'How does this concept apply to',
|
||||||
|
'What is the relationship between'
|
||||||
|
];
|
||||||
|
|
||||||
|
for (let i = 0; i < numQuestions; i++) {
|
||||||
|
const questionType = questionTypes[Math.floor(Math.random() * questionTypes.length)];
|
||||||
|
const keyPoint = file.content.keyPoints[i % file.content.keyPoints.length];
|
||||||
|
|
||||||
|
questions.push({
|
||||||
|
id: i + 1,
|
||||||
|
question: `${questionType} ${keyPoint.toLowerCase()}?`,
|
||||||
|
options: [
|
||||||
|
keyPoint,
|
||||||
|
'Alternative option A',
|
||||||
|
'Alternative option B',
|
||||||
|
'Alternative option C'
|
||||||
|
].sort(() => Math.random() - 0.5),
|
||||||
|
correct: keyPoint
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
title: `Quiz: ${file.content.topic}`,
|
||||||
|
source: file.name,
|
||||||
|
questions: questions
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
displayQuiz(quiz) {
|
||||||
|
const container = document.getElementById('quiz-container');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
container.classList.remove('hidden');
|
||||||
|
|
||||||
|
container.innerHTML = `
|
||||||
|
<div class="quiz-header">
|
||||||
|
<h3>${quiz.title}</h3>
|
||||||
|
<p>Source: ${quiz.source}</p>
|
||||||
|
</div>
|
||||||
|
<div class="quiz-questions">
|
||||||
|
${quiz.questions.map(q => `
|
||||||
|
<div class="quiz-question">
|
||||||
|
<div class="question-text">${q.id}. ${q.question}</div>
|
||||||
|
<div class="quiz-options-list">
|
||||||
|
${q.options.map((option, index) => `
|
||||||
|
<label class="quiz-option">
|
||||||
|
<input type="radio" name="q${q.id}" value="${option}">
|
||||||
|
<span>${option}</span>
|
||||||
|
</label>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('')}
|
||||||
|
</div>
|
||||||
|
<button class="btn btn--primary" onclick="app.submitQuiz()">Submit Quiz</button>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
submitQuiz() {
|
||||||
|
const questions = document.querySelectorAll('.quiz-question');
|
||||||
|
let score = 0;
|
||||||
|
let total = questions.length;
|
||||||
|
|
||||||
|
questions.forEach((question, index) => {
|
||||||
|
const selected = question.querySelector('input[type="radio"]:checked');
|
||||||
|
if (selected) {
|
||||||
|
// For demo purposes, we'll give a random score
|
||||||
|
if (Math.random() > 0.3) score++;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.quizzesCompleted++;
|
||||||
|
this.updateStats();
|
||||||
|
this.addActivity(`Completed quiz - Score: ${score}/${total}`);
|
||||||
|
|
||||||
|
alert(`Quiz completed! Your score: ${score}/${total} (${Math.round((score/total) * 100)}%)`);
|
||||||
|
}
|
||||||
|
|
||||||
|
setupPlannerEvents() {
|
||||||
|
// Wait for DOM to be ready and then attach events
|
||||||
|
setTimeout(() => {
|
||||||
|
const plannerButtons = document.querySelectorAll('.planner-card .btn--secondary');
|
||||||
|
plannerButtons.forEach((btn, index) => {
|
||||||
|
// Remove existing listeners to prevent duplication
|
||||||
|
btn.replaceWith(btn.cloneNode(true));
|
||||||
|
const newBtn = document.querySelectorAll('.planner-card .btn--secondary')[index];
|
||||||
|
|
||||||
|
newBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
|
||||||
|
if (index === 0) {
|
||||||
|
this.addStudySession();
|
||||||
|
} else if (index === 1) {
|
||||||
|
this.addStudyGoal();
|
||||||
|
} else if (index === 2) {
|
||||||
|
this.setReminder();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Goal checkboxes
|
||||||
|
const goalCheckboxes = document.querySelectorAll('.goal-item input[type="checkbox"]');
|
||||||
|
goalCheckboxes.forEach(checkbox => {
|
||||||
|
checkbox.addEventListener('change', () => {
|
||||||
|
if (checkbox.checked) {
|
||||||
|
this.studySessions++;
|
||||||
|
this.updateStats();
|
||||||
|
this.addActivity('Completed study goal');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
addStudySession() {
|
||||||
|
const time = prompt('Enter study time (e.g., 3:00 PM):');
|
||||||
|
const subject = prompt('Enter subject:');
|
||||||
|
|
||||||
|
if (time && subject) {
|
||||||
|
this.studySessions++;
|
||||||
|
this.updateStats();
|
||||||
|
this.addActivity(`Scheduled: ${subject} at ${time}`);
|
||||||
|
alert('Study session added to your schedule!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
addStudyGoal() {
|
||||||
|
const goal = prompt('Enter your study goal:');
|
||||||
|
if (goal) {
|
||||||
|
this.addActivity(`New goal: ${goal}`);
|
||||||
|
alert('Study goal added!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setReminder() {
|
||||||
|
const reminder = prompt('Enter reminder text:');
|
||||||
|
if (reminder) {
|
||||||
|
this.addActivity(`Set reminder: ${reminder}`);
|
||||||
|
alert('Reminder set!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
showLoadingModal(title, text = 'Please wait while we analyze your content and generate study materials.') {
|
||||||
|
const modal = document.getElementById('loading-modal');
|
||||||
|
const titleEl = document.getElementById('loading-title');
|
||||||
|
const textEl = document.getElementById('loading-text');
|
||||||
|
|
||||||
|
if (modal) modal.classList.remove('hidden');
|
||||||
|
if (titleEl) titleEl.textContent = title;
|
||||||
|
if (textEl) textEl.textContent = text;
|
||||||
|
}
|
||||||
|
|
||||||
|
hideLoadingModal() {
|
||||||
|
const modal = document.getElementById('loading-modal');
|
||||||
|
if (modal) modal.classList.add('hidden');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize the application
|
||||||
|
let app;
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
app = new EduCatApp();
|
||||||
|
|
||||||
|
// Add some sample activity for demo
|
||||||
|
setTimeout(() => {
|
||||||
|
app.addActivity('Welcome to EduCat!');
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle modal click to close
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
if (e.target.id === 'loading-modal') {
|
||||||
|
if (app) app.hideLoadingModal();
|
||||||
|
}
|
||||||
|
});
|
||||||
247
index.html
Normal file
247
index.html
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>EduCat: AI Study Buddy</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<div class="container">
|
||||||
|
<div class="header__content">
|
||||||
|
<div class="logo">
|
||||||
|
<h1 class="logo__text">🐱 EduCat</h1>
|
||||||
|
<span class="logo__subtitle">AI Study Buddy</span>
|
||||||
|
</div>
|
||||||
|
<nav class="nav">
|
||||||
|
<button class="nav__item" data-tab="upload">Upload Files</button>
|
||||||
|
<button class="nav__item" data-tab="library">My Notes</button>
|
||||||
|
<button class="nav__item" data-tab="quiz">Quiz Generator</button>
|
||||||
|
<button class="nav__item" data-tab="planner">Study Planner</button>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="welcome-message">
|
||||||
|
<p>Welcome to EduCat - Your AI Study Buddy!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="main">
|
||||||
|
<div class="container">
|
||||||
|
<!-- Dashboard Tab -->
|
||||||
|
<section id="dashboard" class="tab-content active">
|
||||||
|
<div class="hero">
|
||||||
|
<h2>Transform Your Study Materials with AI</h2>
|
||||||
|
<p>Upload your notes, textbooks, and study materials. Let our AI create personalized study guides, quizzes, summaries, and flashcards to boost your learning efficiency.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-card__icon">📁</div>
|
||||||
|
<div class="stat-card__content">
|
||||||
|
<span class="stat-card__number" id="files-count">0</span>
|
||||||
|
<span class="stat-card__label">Files Uploaded</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-card__icon">📚</div>
|
||||||
|
<div class="stat-card__content">
|
||||||
|
<span class="stat-card__number" id="sessions-count">0</span>
|
||||||
|
<span class="stat-card__label">Study Sessions</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-card__icon">🧠</div>
|
||||||
|
<div class="stat-card__content">
|
||||||
|
<span class="stat-card__number" id="quizzes-count">0</span>
|
||||||
|
<span class="stat-card__label">Quizzes Completed</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="recent-activity">
|
||||||
|
<h3>Recent Activity</h3>
|
||||||
|
<div id="activity-list" class="activity-list">
|
||||||
|
<div class="activity-item empty-state">
|
||||||
|
<p>No recent activity. Start by uploading your first file!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Upload Tab -->
|
||||||
|
<section id="upload" class="tab-content">
|
||||||
|
<div class="upload-section">
|
||||||
|
<h2>Upload Your Study Materials</h2>
|
||||||
|
<div class="upload-area" id="upload-area">
|
||||||
|
<div class="upload-area__content">
|
||||||
|
<div class="upload-area__icon">📤</div>
|
||||||
|
<h3>Drag & Drop Files Here</h3>
|
||||||
|
<p>or click to browse files</p>
|
||||||
|
<input type="file" id="file-input" multiple accept=".pdf,.docx,.pptx,.txt,.xlsx">
|
||||||
|
</div>
|
||||||
|
<div class="upload-area__formats">
|
||||||
|
<span class="format-badge">PDF</span>
|
||||||
|
<span class="format-badge">DOCX</span>
|
||||||
|
<span class="format-badge">PPTX</span>
|
||||||
|
<span class="format-badge">TXT</span>
|
||||||
|
<span class="format-badge">XLSX</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="upload-progress" class="upload-progress hidden">
|
||||||
|
<div class="progress-bar">
|
||||||
|
<div class="progress-fill" id="progress-fill"></div>
|
||||||
|
</div>
|
||||||
|
<span id="progress-text">Uploading...</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="file-list" class="file-list">
|
||||||
|
<h3>Uploaded Files</h3>
|
||||||
|
<div id="files-container" class="files-container">
|
||||||
|
<div class="empty-state">
|
||||||
|
<p>No files uploaded yet. Upload your first file to get started!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Library Tab -->
|
||||||
|
<section id="library" class="tab-content">
|
||||||
|
<div class="library-section">
|
||||||
|
<h2>My Study Library</h2>
|
||||||
|
<div class="ai-features">
|
||||||
|
<div class="feature-card" data-feature="study-guide">
|
||||||
|
<div class="feature-card__icon">📖</div>
|
||||||
|
<h3>Study Guide Generator</h3>
|
||||||
|
<p>Convert your files into structured study guides</p>
|
||||||
|
<button class="btn btn--primary">Generate Study Guide</button>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card" data-feature="quiz">
|
||||||
|
<div class="feature-card__icon">❓</div>
|
||||||
|
<h3>Quiz Creator</h3>
|
||||||
|
<p>Generate practice questions from your content</p>
|
||||||
|
<button class="btn btn--primary">Create Quiz</button>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card" data-feature="summary">
|
||||||
|
<div class="feature-card__icon">📝</div>
|
||||||
|
<h3>Summary Generator</h3>
|
||||||
|
<p>Create concise summaries of long documents</p>
|
||||||
|
<button class="btn btn--primary">Generate Summary</button>
|
||||||
|
</div>
|
||||||
|
<div class="feature-card" data-feature="flashcards">
|
||||||
|
<div class="feature-card__icon">🃏</div>
|
||||||
|
<h3>Flashcard Maker</h3>
|
||||||
|
<p>Extract key concepts into flashcards</p>
|
||||||
|
<button class="btn btn--primary">Create Flashcards</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="generated-content" class="generated-content">
|
||||||
|
<!-- Generated content will appear here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Quiz Tab -->
|
||||||
|
<section id="quiz" class="tab-content">
|
||||||
|
<div class="quiz-section">
|
||||||
|
<h2>Quiz Generator</h2>
|
||||||
|
<div class="quiz-options">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Select Study Material</label>
|
||||||
|
<select id="quiz-file-select" class="form-control">
|
||||||
|
<option value="">Select a file to create quiz from</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Number of Questions</label>
|
||||||
|
<select class="form-control" id="quiz-questions">
|
||||||
|
<option value="5">5 Questions</option>
|
||||||
|
<option value="10" selected>10 Questions</option>
|
||||||
|
<option value="15">15 Questions</option>
|
||||||
|
<option value="20">20 Questions</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn--primary" id="generate-quiz">Generate Quiz</button>
|
||||||
|
</div>
|
||||||
|
<div id="quiz-container" class="quiz-container hidden">
|
||||||
|
<!-- Quiz questions will be generated here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Planner Tab -->
|
||||||
|
<section id="planner" class="tab-content">
|
||||||
|
<div class="planner-section">
|
||||||
|
<h2>Study Planner</h2>
|
||||||
|
<div class="planner-grid">
|
||||||
|
<div class="planner-card">
|
||||||
|
<h3>📅 Study Schedule</h3>
|
||||||
|
<div class="study-schedule">
|
||||||
|
<div class="schedule-item">
|
||||||
|
<span class="schedule-time">9:00 AM</span>
|
||||||
|
<span class="schedule-subject">Mathematics Review</span>
|
||||||
|
</div>
|
||||||
|
<div class="schedule-item">
|
||||||
|
<span class="schedule-time">2:00 PM</span>
|
||||||
|
<span class="schedule-subject">Science Quiz Practice</span>
|
||||||
|
</div>
|
||||||
|
<div class="schedule-item">
|
||||||
|
<span class="schedule-time">7:00 PM</span>
|
||||||
|
<span class="schedule-subject">History Flashcards</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn--secondary">Add Study Session</button>
|
||||||
|
</div>
|
||||||
|
<div class="planner-card">
|
||||||
|
<h3>🎯 Study Goals</h3>
|
||||||
|
<div class="goals-list">
|
||||||
|
<div class="goal-item">
|
||||||
|
<input type="checkbox" id="goal1">
|
||||||
|
<label for="goal1">Complete Math Chapter 5</label>
|
||||||
|
</div>
|
||||||
|
<div class="goal-item">
|
||||||
|
<input type="checkbox" id="goal2">
|
||||||
|
<label for="goal2">Review Science Notes</label>
|
||||||
|
</div>
|
||||||
|
<div class="goal-item">
|
||||||
|
<input type="checkbox" id="goal3">
|
||||||
|
<label for="goal3">Practice 20 Quiz Questions</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn--secondary">Add Goal</button>
|
||||||
|
</div>
|
||||||
|
<div class="planner-card">
|
||||||
|
<h3>⏰ Reminders</h3>
|
||||||
|
<div class="reminders-list">
|
||||||
|
<div class="reminder-item">
|
||||||
|
<span class="reminder-text">Math exam in 3 days</span>
|
||||||
|
<span class="status status--warning">Pending</span>
|
||||||
|
</div>
|
||||||
|
<div class="reminder-item">
|
||||||
|
<span class="reminder-text">Submit assignment</span>
|
||||||
|
<span class="status status--error">Overdue</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn--secondary">Set Reminder</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Loading Modal -->
|
||||||
|
<div id="loading-modal" class="modal hidden">
|
||||||
|
<div class="modal__content">
|
||||||
|
<div class="loading-spinner"></div>
|
||||||
|
<h3 id="loading-title">Processing with AI...</h3>
|
||||||
|
<p id="loading-text">Please wait while we analyze your content and generate study materials.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user