Merge pull request 'Improvements to quiz and dashboards.' (#9) from next into master

Reviewed-on: #9

package.json

@@ -15,11 +15,14 @@
     "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "ejs": "^3.1.10",
+    "exceljs": "^4.4.0",
     "express": "^4.19.2",
     "express-session": "^1.18.0",
     "form-data": "^4.0.3",
     "fs-extra": "^11.2.0",
+    "mammoth": "^1.9.1",
     "multer": "^2.0.0",
+    "pdf-parse": "^1.1.1",
     "uuid": "^10.0.0"
   },
   "devDependencies": {

public/css/style.css

@@ -156,8 +156,72 @@ body {
     }
 }
 
-.file-icon {
-    font-size: 1.2rem;
+.dashboard-file-icon {
+    font-size: 1.25rem !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    min-width: 50px !important;
+    width: 50px !important;
+    height: 50px !important;
+    flex-shrink: 0 !important;
+}
+
+.dashboard-file-icon i {
+    font-size: 1.25rem !important;
+    line-height: 1 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    vertical-align: middle !important;
+}
+
+/* Force proper icon rendering to prevent compression */
+.revised-files-section .file-icon {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border-radius: 50% !important;
+    overflow: hidden;
+    position: relative;
+}
+
+.revised-files-section .file-icon::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 50%;
+    background: inherit;
+    z-index: -1;
+}
+
+/* AI text icon styling */
+.revised-files-section .ai-icon {
+    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
+    color: white !important;
+    font-weight: bold !important;
+    font-size: 1.2rem !important;
+    letter-spacing: 1px !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
+    border: 2px solid rgba(255, 255, 255, 0.2) !important;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Ensure icon font doesn't get compressed */
+.revised-files-section .fa-brain {
+    transform: none !important;
+    font-weight: 900 !important;
+    font-family: "Font Awesome 5 Free" !important;
+    vertical-align: middle !important;
+    display: inline-block !important;
+    font-style: normal !important;
+    font-variant: normal !important;
+    text-rendering: auto !important;
+    line-height: 1 !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .progress-bar-animated {
@@ -190,50 +254,203 @@ body {
     margin-top: auto;
 }
 
-/* Responsive adjustments */
+/* Revised Files Section Styling */
+.revised-files-section .card {
+    transition: all 0.3s ease;
+}
+
+.revised-files-section .card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.revised-files-section .file-icon {
+    min-width: 50px !important;
+    width: 50px !important;
+    height: 50px !important;
+    flex-shrink: 0 !important;
+    font-size: 1.25rem !important;
+    line-height: 1 !important;
+}
+
+.revised-files-section .file-icon i {
+    font-size: 1.25rem !important;
+    line-height: 1 !important;
+}
+
+.revised-files-section .text-truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.revised-files-section .min-w-0 {
+    min-width: 0;
+}
+
+.revised-files-section .card-body {
+    overflow: hidden;
+}
+
+.revised-files-section .btn-group {
+    width: 100%;
+}
+
+.revised-files-section .btn-group .btn {
+    flex: 1;
+}
+
+.revised-files-section .btn-group .btn:last-child {
+    flex: 0 0 auto;
+    min-width: 40px;
+}
+
+/* File name truncation for long names */
+.file-name-truncate {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+    vertical-align: bottom;
+}
+
+/* Badge styling improvements */
+.revised-files-section .badge {
+    font-size: 0.7rem !important;
+    padding: 0.25em 0.5em;
+    white-space: nowrap;
+}
+
+/* Button spacing and sizing improvements */
+.revised-files-section .d-grid .btn {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Ensure cards have consistent height */
+.revised-files-section .card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.revised-files-section .card-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+/* Responsive adjustments for small screens */
 @media (max-width: 768px) {
-    .hero-section {
-        min-height: 50vh;
-        text-align: center;
+    .revised-files-section .file-name-truncate {
+        max-width: 150px;
     }
     
-    .hero-section .display-4 {
-        font-size: 2rem;
-    }
-    
-    .message-content {
-        max-width: 85% !important;
-    }
-    
-    .avatar {
-        width: 40px !important;
-        height: 40px !important;
-        min-width: 40px !important;
-    }
-    
-    .avatar i {
+    .revised-files-section .file-icon {
+        width: 45px !important;
+        height: 45px !important;
+        min-width: 45px !important;
         font-size: 1rem !important;
     }
     
-    .message-bubble {
-        padding: 0.75rem !important;
-        font-size: 0.9rem;
+    .revised-files-section .ai-icon {
+        font-size: 1rem !important;
+        letter-spacing: 0.5px !important;
     }
     
-    .card-body {
-        padding: 1.5rem;
+    .revised-files-section .file-icon i {
+        font-size: 1.1rem !important;
     }
     
-    #chat-container {
-        height: 400px !important;
-        padding: 1rem !important;
+    .revised-files-section .btn-group .btn {
+        font-size: 0.8rem;
+        padding: 0.375rem 0.5rem;
+    }
+}
+
+/* Mobile responsive file icons */
+@media (max-width: 768px) {
+    .dashboard-file-icon {
+        min-width: 45px !important;
+        width: 45px !important;
+        height: 45px !important;
+        font-size: 1.1rem !important;
     }
     
-    .chat-message {
-        margin-bottom: 1rem;
+    .dashboard-file-icon i {
+        font-size: 1.1rem !important;
     }
 }
 
+/* Dashboard section spacing */
+.dashboard-section {
+    margin-bottom: 2rem;
+}
+
+.dashboard-section h3 {
+    font-weight: 600;
+    color: var(--dark-color);
+}
+
+/* Enhanced visual separation between sections */
+.ai-revised-section {
+    background: linear-gradient(135deg, rgba(40, 167, 69, 0.05) 0%, rgba(40, 167, 69, 0.02) 100%);
+    border-radius: 1rem;
+    padding: 1.5rem;
+    margin-top: 2rem;
+}
+
+/* Badge positioning fixes for dashboard cards */
+.card .badge {
+    position: relative;
+    z-index: 1;
+    display: inline-flex !important;
+    align-items: center !important;
+    white-space: nowrap !important;
+}
+
+.card .text-end {
+    text-align: right !important;
+    position: relative;
+    z-index: 1;
+}
+
+/* Ensure card body contains all content properly */
+.card-body {
+    position: relative;
+    overflow: hidden;
+    padding: 1rem !important;
+}
+
+/* Prevent badge overflow */
+.card .d-flex .text-end {
+    flex-shrink: 0;
+    min-width: fit-content;
+}
+
+.card .d-flex .flex-grow-1 {
+    overflow: hidden;
+    min-width: 0;
+}
+
+/* Dashboard card container fixes */
+.dashboard-section .card {
+    position: relative;
+    overflow: visible;
+    border: 1px solid rgba(0, 0, 0, 0.125);
+    border-radius: 0.375rem;
+}
+
+.dashboard-section .card-body {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+}
+
 /* Loading spinner */
 .spinner-border {
     width: 3rem;

views/dashboard.ejs

@@ -31,7 +31,7 @@
                             <div class="card border-0 shadow-sm h-100">
                                 <div class="card-body">
                                     <div class="d-flex align-items-center mb-3">
-                                        <div class="file-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
+                                        <div class="dashboard-file-icon bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3">
                                             <i class="fas fa-file-alt"></i>
                                         </div>
                                         <div class="flex-grow-1">
@@ -109,6 +109,73 @@
                     <% }); %>
                 </div>
             <% } %>
+            
+            <!-- Revised Files Section -->
+            <% if (typeof revisedFiles !== 'undefined' && revisedFiles.length > 0) { %>
+                <div class="ai-revised-section revised-files-section">
+                    <div class="d-flex justify-content-between align-items-center mb-4">
+                        <h3><i class="fas fa-brain me-2 text-success"></i>AI-Revised Notes</h3>
+                        <small class="text-muted bg-white px-2 py-1 rounded-pill">
+                            <%= revisedFiles.length %> revised file<%= revisedFiles.length !== 1 ? 's' : '' %>
+                        </small>
+                    </div>
+                    <div class="row">
+                        <% revisedFiles.forEach(function(file, index) { %>
+                            <div class="col-md-6 col-lg-4 mb-4">
+                                <div class="card border-0 shadow-sm h-100 border-start border-4 border-success">
+                                    <div class="card-body p-3">
+                                        <div class="d-flex align-items-start mb-3">
+                                            <div class="file-icon bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3 ai-icon" style="width: 50px; height: 50px; min-width: 50px; font-size: 1.2rem; font-weight: bold; letter-spacing: 1px;">
+                                                AI
+                                            </div>
+                                            <div class="flex-grow-1 min-w-0">
+                                                <h6 class="mb-1 file-name-truncate" title="<%= file.originalName %>">
+                                                    <%= file.originalName %>
+                                                </h6>
+                                                <div class="d-flex flex-wrap align-items-center gap-1 mb-1">
+                                                    <small class="text-muted"><%= Math.round(file.size / 1024) %> KB</small>
+                                                    <span class="badge bg-success text-white">
+                                                        <%= file.revisionType.charAt(0).toUpperCase() + file.revisionType.slice(1) %>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="mb-3">
+                                            <div class="small text-muted mb-1">
+                                                <i class="fas fa-calendar me-1"></i>
+                                                <%= new Date(file.uploadDate).toLocaleDateString() %>
+                                            </div>
+                                            <% if (file.originalFileName) { %>
+                                                <div class="small text-muted file-name-truncate" title="From: <%= file.originalFileName %>">
+                                                    <i class="fas fa-file-alt me-1"></i>
+                                                    From: <%= file.originalFileName %>
+                                                </div>
+                                            <% } %>
+                                        </div>
+                                        
+                                        <div class="mt-auto">
+                                            <div class="d-grid gap-2">
+                                                <button type="button" class="btn btn-outline-primary btn-sm" onclick="previewRevisedFile('<%= file.id %>')">
+                                                    <i class="fas fa-eye me-1"></i>Preview
+                                                </button>
+                                                <div class="btn-group w-100" role="group">
+                                                    <a href="/uploads/revised-notes/<%= file.filename %>" download class="btn btn-success btn-sm">
+                                                        <i class="fas fa-download me-1"></i>Download
+                                                    </a>
+                                                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="deleteRevisedFile('<%= file.id %>')" title="Delete">
+                                                        <i class="fas fa-trash"></i>
+                                                    </button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        <% }); %>
+                    </div>
+                </div>
+            <% } %>
         </div>
     </div>
 </div>
@@ -181,10 +248,8 @@ function previewFile(fileId) {
                 const file = result.file;
                 let content = '';
                 
-                // Check file type and format content accordingly
-                const fileExtension = file.originalName.split('.').pop().toLowerCase();
-                
-                if (['txt', 'md', 'json', 'js', 'html', 'css', 'py', 'java', 'cpp', 'c'].includes(fileExtension)) {
+                // Handle different preview types
+                if (file.previewType === 'text') {
                     // Text-based files - show with syntax highlighting
                     content = `
                         <div class="mb-3">
@@ -198,8 +263,35 @@ function previewFile(fileId) {
                             <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;"><code>${escapeHtml(file.content)}</code></pre>
                         </div>
                     `;
-                } else if (['pdf', 'doc', 'docx'].includes(fileExtension)) {
-                    // Document files - show basic info and content preview
+                } else if (file.previewType === 'extracted-text') {
+                    // Successfully extracted text from document
+                    const extractionInfo = file.extractionInfo || {};
+                    const infoText = [];
+                    
+                    if (extractionInfo.pages) infoText.push(`${extractionInfo.pages} pages`);
+                    if (extractionInfo.sheets) infoText.push(`${extractionInfo.sheets} sheets`);
+                    if (extractionInfo.totalLength) infoText.push(`${extractionInfo.totalLength} characters extracted`);
+                    
+                    content = `
+                        <div class="mb-3">
+                            <h6><i class="fas fa-file-word me-2"></i>${file.originalName}</h6>
+                            <small class="text-muted">
+                                Size: ${Math.round(file.size / 1024)} KB | 
+                                Uploaded: ${new Date(file.uploadDate).toLocaleDateString()}
+                                ${infoText.length > 0 ? ' | ' + infoText.join(', ') : ''}
+                            </small>
+                        </div>
+                        <div class="alert alert-success">
+                            <i class="fas fa-check-circle me-2"></i>
+                            ${file.message || 'Text successfully extracted from document'}
+                        </div>
+                        <div class="border rounded p-3" style="background-color: #f8f9fa; max-height: 400px; overflow-y: auto;">
+                            <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(file.content)}</pre>
+                        </div>
+                        ${extractionInfo.truncated ? '<small class="text-muted mt-2 d-block"><i class="fas fa-info-circle me-1"></i>Full document content is available for AI processing</small>' : ''}
+                    `;
+                } else if (file.previewType === 'binary') {
+                    // Binary files - show info message
                     content = `
                         <div class="mb-3">
                             <h6><i class="fas fa-file-pdf me-2"></i>${file.originalName}</h6>
@@ -210,14 +302,47 @@ function previewFile(fileId) {
                         </div>
                         <div class="alert alert-info">
                             <i class="fas fa-info-circle me-2"></i>
-                            Document preview: First few lines of extracted text
+                            ${file.message || 'This is a binary file that has been processed for AI use.'}
                         </div>
-                        <div class="border rounded p-3" style="background-color: #f8f9fa; max-height: 400px; overflow-y: auto;">
-                            <pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(file.content.substring(0, 1000))}${file.content.length > 1000 ? '...' : ''}</pre>
+                        ${file.content && file.content !== 'File preview not available' ? `
+                            <div class="border rounded p-3" style="background-color: #f8f9fa; max-height: 400px; overflow-y: auto;">
+                                <small class="text-muted">Extracted content preview:</small>
+                                <pre style="margin: 0; margin-top: 10px; white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(file.content)}</pre>
+                            </div>
+                        ` : ''}
+                    `;
+                } else if (file.previewType === 'extraction-failed') {
+                    // Failed to extract text
+                    content = `
+                        <div class="mb-3">
+                            <h6><i class="fas fa-file-exclamation me-2"></i>${file.originalName}</h6>
+                            <small class="text-muted">
+                                Size: ${Math.round(file.size / 1024)} KB | 
+                                Uploaded: ${new Date(file.uploadDate).toLocaleDateString()}
+                            </small>
+                        </div>
+                        <div class="alert alert-warning">
+                            <i class="fas fa-exclamation-triangle me-2"></i>
+                            ${file.message || 'Could not extract text from this file.'}
+                        </div>
+                    `;
+                } else if (file.previewType === 'error') {
+                    // Error reading file
+                    content = `
+                        <div class="mb-3">
+                            <h6><i class="fas fa-file-times me-2"></i>${file.originalName}</h6>
+                            <small class="text-muted">
+                                Size: ${Math.round(file.size / 1024)} KB | 
+                                Uploaded: ${new Date(file.uploadDate).toLocaleDateString()}
+                            </small>
+                        </div>
+                        <div class="alert alert-danger">
+                            <i class="fas fa-exclamation-circle me-2"></i>
+                            ${file.message || 'Error reading file.'}
                         </div>
                     `;
                 } else {
-                    // Other files - show basic info
+                    // Fallback for unknown preview types
                     content = `
                         <div class="mb-3">
                             <h6><i class="fas fa-file me-2"></i>${file.originalName}</h6>
@@ -748,6 +873,73 @@ document.addEventListener('DOMContentLoaded', function() {
         }, 10000);
     }
 });
+
+// Preview revised file function
+async function previewRevisedFile(fileId) {
+    try {
+        // Get file information by making an API call instead of using template data
+        const response = await fetch(`/api/revised-files/${fileId}/info`);
+        if (!response.ok) {
+            throw new Error('Failed to get file info');
+        }
+        
+        const fileInfo = await response.json();
+        if (!fileInfo.success) {
+            throw new Error(fileInfo.error || 'Failed to get file info');
+        }
+        
+        const file = fileInfo.file;
+        
+        // Download the file content
+        const contentResponse = await fetch(`/uploads/revised-notes/${file.filename}`);
+        if (!contentResponse.ok) {
+            throw new Error('Failed to load file content');
+        }
+        
+        const content = await contentResponse.text();
+        const modal = new bootstrap.Modal(document.getElementById('previewModal'));
+        
+        document.getElementById('preview-content').innerHTML = `
+            <div class="alert alert-info">
+                <i class="fas fa-brain me-2"></i>
+                <strong>AI-Revised Content</strong> • ${file.revisionType} • From: ${file.originalFileName || 'Unknown'}
+            </div>
+            <div class="border p-3 bg-light rounded" style="max-height: 400px; overflow-y: auto;">
+                <pre style="white-space: pre-wrap; word-wrap: break-word;">${escapeHtml(content)}</pre>
+            </div>
+        `;
+        
+        modal.show();
+    } catch (error) {
+        console.error('Error previewing revised file:', error);
+        alert('Failed to preview file: ' + error.message);
+    }
+}
+
+// Delete revised file function
+async function deleteRevisedFile(fileId) {
+    if (!confirm('Are you sure you want to delete this revised file? This action cannot be undone.')) {
+        return;
+    }
+    
+    try {
+        const response = await fetch(`/api/revised-files/${fileId}`, {
+            method: 'DELETE'
+        });
+        
+        const result = await response.json();
+        
+        if (result.success) {
+            // Reload the page to update the file list
+            location.reload();
+        } else {
+            alert('Error deleting file: ' + (result.error || 'Unknown error'));
+        }
+    } catch (error) {
+        console.error('Error deleting revised file:', error);
+        alert('Network error: ' + error.message);
+    }
+}
 </script>
 
 <%- include('partials/footer') %>

views/quiz.ejs

@@ -143,7 +143,7 @@
     <!-- Results Container -->
     <div id="results-container" class="d-none">
         <div class="row">
-            <div class="col-lg-8">
+            <div class="col-lg-12">
                 <div class="card shadow-sm border-0">
                     <div class="card-header bg-info text-white">
                         <h4 class="mb-0"><i class="fas fa-chart-line me-2"></i>Quiz Results</h4>
@@ -166,15 +166,6 @@
                     </div>
                 </div>
             </div>
-            
-            <div class="col-lg-4">
-                <div class="card border-0 shadow-sm">
-                    <div class="card-body">
-                        <h5><i class="fas fa-trophy me-2"></i>Performance</h5>
-                        <div id="performance-chart"></div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>
@@ -339,6 +330,14 @@ document.addEventListener('DOMContentLoaded', function() {
                 resetQuiz();
             });
         }
+        
+        // Add event listener for review button
+        const reviewBtn = document.getElementById('review-btn');
+        if (reviewBtn) {
+            reviewBtn.addEventListener('click', () => {
+                reviewAnswers();
+            });
+        }
     }
     
     function displayQuestion(index) {
@@ -378,8 +377,8 @@ document.addEventListener('DOMContentLoaded', function() {
                 `;
             });
             html += '</div>';
-        } else if (question.correct === 'True' || question.correct === 'False') {
-            // True/False
+        } else if ((question.correct === 'True' || question.correct === 'False') && !question.answer) {
+            // True/False (only if it's not a short-answer question)
             html += `
                 <div class="mb-3">
                     <div class="form-check mb-2">
@@ -556,6 +555,9 @@ document.addEventListener('DOMContentLoaded', function() {
     }
     
     function displayResults(results) {
+        // Store results globally for review functionality
+        window.lastQuizResults = results;
+        
         quizContainer.classList.add('d-none');
         resultsContainer.classList.remove('d-none');
         
@@ -636,6 +638,256 @@ document.addEventListener('DOMContentLoaded', function() {
         
         quizForm.reset();
     }
+    
+    function reviewAnswers() {
+        // Switch from results view back to quiz view for review
+        resultsContainer.classList.add('d-none');
+        quizContainer.classList.remove('d-none');
+        
+        // Set to review mode and start from first question
+        currentQuestion = 0;
+        displayQuestionInReviewMode(currentQuestion);
+        displayOverviewInReviewMode();
+        
+        // Update navigation for review mode
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const submitBtn = document.getElementById('submit-btn');
+        
+        // Remove existing event listeners by cloning elements
+        if (prevBtn) {
+            const newPrevBtn = prevBtn.cloneNode(true);
+            prevBtn.parentNode.replaceChild(newPrevBtn, prevBtn);
+            newPrevBtn.onclick = () => {
+                if (currentQuestion > 0) {
+                    currentQuestion--;
+                    displayQuestionInReviewMode(currentQuestion);
+                }
+            };
+        }
+        
+        if (nextBtn) {
+            const newNextBtn = nextBtn.cloneNode(true);
+            nextBtn.parentNode.replaceChild(newNextBtn, nextBtn);
+            newNextBtn.onclick = () => {
+                if (currentQuestion < currentQuiz.length - 1) {
+                    currentQuestion++;
+                    displayQuestionInReviewMode(currentQuestion);
+                }
+            };
+        }
+        
+        // Hide submit button completely in review mode
+        if (submitBtn) {
+            submitBtn.classList.add('d-none');
+        }
+        
+        // Add a "Back to Results" button
+        const cardBody = submitBtn.parentElement;
+        let backToResultsBtn = document.getElementById('back-to-results-btn');
+        if (!backToResultsBtn) {
+            backToResultsBtn = document.createElement('button');
+            backToResultsBtn.id = 'back-to-results-btn';
+            backToResultsBtn.className = 'btn btn-info';
+            backToResultsBtn.innerHTML = '<i class="fas fa-arrow-left me-2"></i>Back to Results';
+            backToResultsBtn.onclick = () => {
+                quizContainer.classList.add('d-none');
+                resultsContainer.classList.remove('d-none');
+                // Remove the back button
+                backToResultsBtn.remove();
+            };
+            cardBody.appendChild(backToResultsBtn);
+        }
+    }
+    
+    function displayQuestionInReviewMode(index) {
+        if (!currentQuiz || index >= currentQuiz.length) {
+            console.error('Invalid question index or quiz not loaded');
+            return;
+        }
+        
+        const question = currentQuiz[index];
+        const questionsDiv = document.getElementById('quiz-questions');
+        
+        if (!questionsDiv) {
+            console.error('Questions div not found!');
+            return;
+        }
+        
+        // Get the quiz results from the last submission
+        const resultForThisQuestion = window.lastQuizResults ? 
+            window.lastQuizResults.results[index] : null;
+        
+        let html = `
+            <div class="mb-4">
+                <h5 class="mb-3">
+                    Question ${index + 1} 
+                    ${resultForThisQuestion ? 
+                        `<span class="badge ${resultForThisQuestion.isCorrect ? 'bg-success' : 'bg-danger'} ms-2">
+                            ${resultForThisQuestion.isCorrect ? 'Correct' : 'Incorrect'}
+                        </span>` : ''
+                    }
+                </h5>
+                <p class="lead">${escapeHtml(question.question)}</p>
+            </div>
+        `;
+        
+        if (question.options) {
+            // Multiple choice - show options with user's answer and correct answer highlighted
+            html += '<div class="mb-3">';
+            question.options.forEach((option, i) => {
+                const optionLetter = option.charAt(0);
+                const userSelected = userAnswers[index] === optionLetter;
+                const isCorrect = question.correct === optionLetter;
+                
+                let className = 'form-check mb-2';
+                let labelClass = 'form-check-label';
+                
+                if (userSelected && isCorrect) {
+                    className += ' bg-success bg-opacity-10 border border-success rounded p-2';
+                    labelClass += ' text-success fw-bold';
+                } else if (userSelected && !isCorrect) {
+                    className += ' bg-danger bg-opacity-10 border border-danger rounded p-2';
+                    labelClass += ' text-danger fw-bold';
+                } else if (!userSelected && isCorrect) {
+                    className += ' bg-warning bg-opacity-10 border border-warning rounded p-2';
+                    labelClass += ' text-warning fw-bold';
+                }
+                
+                html += `
+                    <div class="${className}">
+                        <input class="form-check-input" type="radio" disabled 
+                               ${userSelected ? 'checked' : ''}>
+                        <label class="${labelClass}">
+                            ${escapeHtml(option)}
+                            ${isCorrect ? ' ✓ (Correct answer)' : ''}
+                        </label>
+                    </div>
+                `;
+            });
+            html += '</div>';
+        } else if ((question.correct === 'True' || question.correct === 'False') && !question.answer) {
+            // True/False (only if it's not a short-answer question)
+            const userSelected = userAnswers[index];
+            const correctAnswer = question.correct;
+            
+            ['True', 'False'].forEach(option => {
+                const userSelectedThis = userSelected === option;
+                const isCorrect = correctAnswer === option;
+                
+                let className = 'form-check mb-2';
+                let labelClass = 'form-check-label';
+                
+                if (userSelectedThis && isCorrect) {
+                    className += ' bg-success bg-opacity-10 border border-success rounded p-2';
+                    labelClass += ' text-success fw-bold';
+                } else if (userSelectedThis && !isCorrect) {
+                    className += ' bg-danger bg-opacity-10 border border-danger rounded p-2';
+                    labelClass += ' text-danger fw-bold';
+                } else if (!userSelectedThis && isCorrect) {
+                    className += ' bg-warning bg-opacity-10 border border-warning rounded p-2';
+                    labelClass += ' text-warning fw-bold';
+                }
+                
+                html += `
+                    <div class="${className}">
+                        <input class="form-check-input" type="radio" disabled 
+                               ${userSelectedThis ? 'checked' : ''}>
+                        <label class="${labelClass}">
+                            ${option}
+                            ${isCorrect ? ' ✓ (Correct answer)' : ''}
+                        </label>
+                    </div>
+                `;
+            });
+        } else {
+            // Short answer
+            const userAnswer = userAnswers[index] || '';
+            const correctAnswer = question.answer || question.correct || '';
+            
+            html += `
+                <div class="mb-3">
+                    <label class="form-label fw-bold">Your Answer:</label>
+                    <div class="p-3 bg-light border rounded">
+                        ${userAnswer ? escapeHtml(userAnswer) : '<em>No answer provided</em>'}
+                    </div>
+                    <label class="form-label fw-bold mt-3 text-success">Correct Answer:</label>
+                    <div class="p-3 bg-success bg-opacity-10 border border-success rounded">
+                        ${escapeHtml(correctAnswer)}
+                    </div>
+                </div>
+            `;
+        }
+        
+        // Add explanation if available
+        if (resultForThisQuestion && resultForThisQuestion.explanation) {
+            html += `
+                <div class="mt-3 p-3 bg-info bg-opacity-10 border border-info rounded">
+                    <strong>Explanation:</strong>
+                    <p class="mb-0 mt-2">${escapeHtml(resultForThisQuestion.explanation)}</p>
+                </div>
+            `;
+        }
+        
+        questionsDiv.innerHTML = html;
+        
+        // Update progress
+        const progressEl = document.getElementById('quiz-progress');
+        if (progressEl) {
+            progressEl.textContent = `Review: Question ${index + 1} of ${currentQuiz.length}`;
+        }
+        
+        // Update navigation buttons for review mode
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const submitBtn = document.getElementById('submit-btn');
+        
+        if (prevBtn) prevBtn.disabled = index === 0;
+        if (nextBtn) {
+            nextBtn.disabled = index === currentQuiz.length - 1;
+            nextBtn.classList.remove('d-none');
+        }
+        // Keep submit button hidden in review mode
+        if (submitBtn) {
+            submitBtn.classList.add('d-none');
+        }
+    }
+    
+    function displayOverviewInReviewMode() {
+        const overviewDiv = document.getElementById('quiz-overview');
+        let html = '<div class="row">';
+        
+        currentQuiz.forEach((_, i) => {
+            const resultForQuestion = window.lastQuizResults ? 
+                window.lastQuizResults.results[i] : null;
+            const isCurrent = i === currentQuestion;
+            
+            let btnClass = 'btn btn-sm w-100 ';
+            if (isCurrent) {
+                btnClass += 'btn-primary';
+            } else if (resultForQuestion) {
+                btnClass += resultForQuestion.isCorrect ? 'btn-success' : 'btn-danger';
+            } else {
+                btnClass += 'btn-outline-secondary';
+            }
+            
+            html += `
+                <div class="col-4 mb-2">
+                    <button class="${btnClass}" onclick="goToQuestionInReview(${i})">
+                        ${i + 1}
+                    </button>
+                </div>
+            `;
+        });
+        
+        html += '</div>';
+        overviewDiv.innerHTML = html;
+    }
+    
+    window.goToQuestionInReview = function(index) {
+        currentQuestion = index;
+        displayQuestionInReviewMode(currentQuestion);
+    };
 });
 </script>
 

views/revise.ejs

@@ -8,11 +8,30 @@
                     <h3 class="mb-0"><i class="fas fa-edit me-2"></i>Revise: <%= file.originalName %></h3>
                 </div>
                 <div class="card-body">
+                    <% if (extractionError) { %>
+                        <div class="alert alert-warning">
+                            <i class="fas fa-exclamation-triangle me-2"></i>
+                            <%= extractionError %>
+                        </div>
+                    <% } else if (extractionInfo) { %>
+                        <div class="alert alert-info">
+                            <i class="fas fa-info-circle me-2"></i>
+                            Text extracted using <%= extractionInfo.method %> 
+                            <% if (extractionInfo.pages) { %>
+                                | <%= extractionInfo.pages %> pages
+                            <% } %>
+                            <% if (extractionInfo.sheets) { %>
+                                | <%= extractionInfo.sheets %> sheets
+                            <% } %>
+                            | <%= extractionInfo.totalLength %> characters
+                        </div>
+                    <% } %>
+                    
                     <div class="row">
                         <div class="col-md-6">
                             <h5>Original Notes</h5>
                             <div class="border p-3 bg-light rounded" style="height: 400px; overflow-y: auto;">
-                                <pre class="mb-0"><%= content %></pre>
+                                <pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;"><%= content %></pre>
                             </div>
                         </div>
                         <div class="col-md-6">
@@ -58,7 +77,32 @@
                         <li><strong>Name:</strong> <%= file.originalName %></li>
                         <li><strong>Size:</strong> <%= Math.round(file.size / 1024) %> KB</li>
                         <li><strong>Uploaded:</strong> <%= new Date(file.uploadDate).toLocaleDateString() %></li>
+                        <% if (extractionInfo) { %>
+                            <li><strong>Extraction:</strong> <%= extractionInfo.method %></li>
+                            <% if (extractionInfo.pages) { %>
+                                <li><strong>Pages:</strong> <%= extractionInfo.pages %></li>
+                            <% } %>
+                            <% if (extractionInfo.sheets) { %>
+                                <li><strong>Sheets:</strong> <%= extractionInfo.sheets %></li>
+                            <% } %>
+                            <li><strong>Characters:</strong> <%= extractionInfo.totalLength.toLocaleString() %></li>
+                        <% } %>
                     </ul>
+                    
+                    <% if (file.status) { %>
+                        <div class="mt-3">
+                            <strong>Processing Status:</strong>
+                            <% if (file.status === 'processed') { %>
+                                <span class="badge bg-success ms-2">Processed</span>
+                            <% } else if (file.status === 'processing') { %>
+                                <span class="badge bg-warning ms-2">Processing</span>
+                            <% } else if (file.status === 'failed') { %>
+                                <span class="badge bg-danger ms-2">Failed</span>
+                            <% } else { %>
+                                <span class="badge bg-secondary ms-2"><%= file.status %></span>
+                            <% } %>
+                        </div>
+                    <% } %>
                 </div>
             </div>
 
@@ -96,15 +140,20 @@ document.addEventListener('DOMContentLoaded', function() {
     const saveBtn = document.getElementById('save-btn');
     const downloadBtn = document.getElementById('download-btn');
     
+    const fileId = '<%= file.id %>';
+    const content = <%- JSON.stringify(content) %>;
+    let currentRevisedContent = '';
+    let currentRevisionType = '';
+    
     reviseBtn.addEventListener('click', async function() {
         const type = revisionType.value;
-        const content = `<%= content.replace(/"/g, '\\"').replace(/\n/g, '\\n') %>`;
         
         console.log('Revise button clicked with type:', type);
+        console.log('File ID:', fileId);
         
         reviseBtn.disabled = true;
         revisionProgress.classList.remove('d-none');
-        revisedContent.innerHTML = '<p class="text-muted text-center mt-5">Processing...</p>';
+        revisedContent.innerHTML = '<div class="text-center mt-5"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Processing...</span></div><p class="mt-2">AI is processing your notes...</p></div>';
         
         try {
             console.log('Sending request to /api/revise');
@@ -115,34 +164,114 @@ document.addEventListener('DOMContentLoaded', function() {
                 },
                 body: JSON.stringify({
                     content: content,
-                    revisionType: type
+                    revisionType: type,
+                    fileId: fileId
                 })
             });
             
             console.log('Response status:', response.status);
             
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            
             const result = await response.json();
             console.log('Revision result:', result);
             
             if (result.success) {
-                revisedContent.innerHTML = '<pre class="mb-0">' + result.revisedContent + '</pre>';
+                revisedContent.innerHTML = '<pre class="mb-0" style="white-space: pre-wrap; word-wrap: break-word;">' + escapeHtml(result.revisedContent) + '</pre>';
+                currentRevisedContent = result.revisedContent;
+                currentRevisionType = type;
                 saveBtn.disabled = false;
                 downloadBtn.disabled = false;
             } else {
-                revisedContent.innerHTML = '<div class="alert alert-danger">Error: ' + (result.error || 'Unknown error') + '</div>';
+                revisedContent.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i><strong>Error:</strong> ' + escapeHtml(result.error || 'Unknown error occurred') + '</div>';
             }
         } catch (error) {
             console.error('Revision error:', error);
-            revisedContent.innerHTML = '<div class="alert alert-danger">Error: ' + error.message + '</div>';
+            revisedContent.innerHTML = '<div class="alert alert-danger"><i class="fas fa-exclamation-circle me-2"></i><strong>Network Error:</strong> ' + escapeHtml(error.message) + '<br><small>Please check your connection and try again.</small></div>';
         } finally {
             reviseBtn.disabled = false;
             revisionProgress.classList.add('d-none');
         }
     });
+    
+    // Save revised notes button
+    saveBtn.addEventListener('click', async function() {
+        if (!currentRevisedContent) {
+            alert('No revised content to save. Please revise the notes first.');
+            return;
+        }
+        
+        saveBtn.disabled = true;
+        const originalText = saveBtn.innerHTML;
+        saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Saving...';
+        
+        try {
+            const response = await fetch('/api/save-revised', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    fileId: fileId,
+                    revisedContent: currentRevisedContent,
+                    revisionType: currentRevisionType
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.success) {
+                // Show success message
+                const successAlert = document.createElement('div');
+                successAlert.className = 'alert alert-success alert-dismissible fade show mt-3';
+                successAlert.innerHTML = `
+                    <i class="fas fa-check-circle me-2"></i>
+                    <strong>Success!</strong> Revised notes saved as "${result.fileInfo.originalName}"
+                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+                `;
+                document.querySelector('.card-body').appendChild(successAlert);
+                
+                // Auto-hide after 5 seconds
+                setTimeout(() => {
+                    successAlert.remove();
+                }, 5000);
+            } else {
+                alert('Error saving revised notes: ' + (result.error || 'Unknown error'));
+            }
+        } catch (error) {
+            console.error('Save error:', error);
+            alert('Network error while saving. Please try again.');
+        } finally {
+            saveBtn.disabled = false;
+            saveBtn.innerHTML = originalText;
+        }
+    });
+    
+    // Download revised notes button
+    downloadBtn.addEventListener('click', function() {
+        if (!currentRevisedContent) {
+            alert('No revised content to download. Please revise the notes first.');
+            return;
+        }
+        
+        // Create download URL with content and revision type as query parameters
+        const encodedContent = encodeURIComponent(currentRevisedContent);
+        const encodedRevisionType = encodeURIComponent(currentRevisionType);
+        const downloadUrl = `/api/download-revised/${fileId}?content=${encodedContent}&revisionType=${encodedRevisionType}`;
+        
+        // Create temporary link and trigger download
+        const link = document.createElement('a');
+        link.href = downloadUrl;
+        link.style.display = 'none';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    });
+    
+    // Helper function to escape HTML
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
 });
 </script>