feat: add revision notes display in quiz and question reference in notes modal

Quiz (quiz_v2.html):
- Display revision notes in details panel when pressing space
- Show question thumbnail alongside details
- Improved grid layout for details panel

Notes Modal (question_entry_v2.html):
- Add question reference panel on left side while writing notes
- User can see the question while handwriting revision notes
- Responsive: panel hidden on mobile

Backend (neetprep.py):
- Include note_filename in quiz question data for classified questions

Co-Authored-By: Claude (claude-opus-4-5-thinking) <noreply@anthropic.com>

neetprep.py

@@ -358,12 +358,12 @@ def generate_neetprep_pdf():
                 WHERE q.chapter IN ({placeholders}) AND s.user_id = ?
             """, (*topics, current_user.id)).fetchall()
             for q in classified_questions_from_db:
-                image_info = conn.execute("SELECT processed_filename FROM images WHERE id = ?", (q['image_id'],)).fetchone()
+                image_info = conn.execute("SELECT processed_filename, note_filename FROM images WHERE id = ?", (q['image_id'],)).fetchone()
                 if image_info and image_info['processed_filename']:
                     if pdf_type == 'quiz':
                         all_questions.append({
                             'image_path': f"/processed/{image_info['processed_filename']}",
-                            'details': {'id': q['id'], 'options': [], 'correct_answer_index': q['actual_solution'], 'user_answer_index': q['marked_solution'], 'source': 'classified', 'topic': q['chapter'], 'subject': q['subject']}
+                            'details': {'id': q['id'], 'options': [], 'correct_answer_index': q['actual_solution'], 'user_answer_index': q['marked_solution'], 'source': 'classified', 'topic': q['chapter'], 'subject': q['subject'], 'note_filename': image_info['note_filename']}
                         })
                     else:
                         all_questions.append({"id": q['id'], "question_text": f"<img src=\"{os.path.join(current_app.config['PROCESSED_FOLDER'], image_info['processed_filename'])}\" />", "options": [], "correct_answer_index": q['actual_solution'], "user_answer_index": q['marked_solution'], "status": q['status'], "source": "classified", "custom_fields": {"subject": q['subject'], "chapter": q['chapter'], "question_number": q['question_number']}})
@@ -1145,7 +1145,7 @@ def collection_quiz(session_id):
     # Get classified bookmarked questions
     classified_questions = conn.execute("""
         SELECT q.id, q.actual_solution as correct_answer_index, q.marked_solution as user_answer_index,
-               q.chapter as topic, q.subject, i.processed_filename
+               q.chapter as topic, q.subject, i.processed_filename, i.note_filename
         FROM neetprep_bookmarks b
         JOIN questions q ON CAST(b.neetprep_question_id AS INTEGER) = q.id
         LEFT JOIN images i ON q.image_id = i.id
@@ -1164,7 +1164,8 @@ def collection_quiz(session_id):
                     'user_answer_index': q['user_answer_index'],
                     'source': 'classified',
                     'topic': q['topic'],
-                    'subject': q['subject']
+                    'subject': q['subject'],
+                    'note_filename': q['note_filename']
                 }
             })
 

templates/question_entry_v2.html

@@ -58,9 +58,15 @@
     }
     
     /* Notes Modal Styles */
+    #notes-canvas-body {
+        height: calc(100vh - 140px);
+    }
+    #question-reference-panel {
+        min-width: 200px;
+        max-width: 300px;
+    }
     #notes-canvas-container {
-        width: 100%;
-        height: calc(100vh - 180px);
+        height: 100%;
         background: #f8f9fa;
         border: 1px solid #495057;
         overflow: hidden;
@@ -73,6 +79,11 @@
     #notes-canvas-container canvas {
         touch-action: none;  /* Critical for stylus/touch drawing */
     }
+    @media (max-width: 768px) {
+        #question-reference-panel {
+            display: none !important;
+        }
+    }
     .notes-toolbar {
         display: flex;
         gap: 8px;
@@ -454,8 +465,16 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="modal-body p-0" id="notes-canvas-body">
-                            <div id="notes-canvas-container">
+                        <div class="modal-body p-0 d-flex" id="notes-canvas-body">
+                            <!-- Question Reference Panel -->
+                            <div id="question-reference-panel" class="bg-secondary" style="width: 250px; flex-shrink: 0; overflow: auto; border-right: 2px solid #495057;">
+                                <div class="p-2 text-center">
+                                    <small class="text-white-50">Question Reference</small>
+                                    <img id="notes-question-ref" src="" class="img-fluid rounded mt-2" style="max-height: 80vh; object-fit: contain;" alt="Question">
+                                </div>
+                            </div>
+                            <!-- Canvas Area -->
+                            <div id="notes-canvas-container" style="flex: 1;">
                                 <canvas id="notes-canvas"></canvas>
                             </div>
                         </div>
@@ -706,11 +725,17 @@
     }
     
     // --- CANVAS FUNCTIONS ---
+    let currentQuestionImageUrl = null;
+
     function openNotesModal(imageId, imageUrl, existingNoteUrl) {
         currentNoteImageId = imageId;
+        currentQuestionImageUrl = imageUrl;
         canvasHistory = [];
         historyIndex = -1;
 
+        // Set the question reference image
+        document.getElementById('notes-question-ref').src = imageUrl;
+
         const modal = new bootstrap.Modal(document.getElementById('notesModal'));
         modal.show();
 

templates/quiz_v2.html

@@ -89,12 +89,45 @@
         display: none;
         background-color: #343a40;
         border-top: 1px solid #6c757d;
-        max-height: 30%;
+        max-height: 50%;
         overflow-y: auto;
         padding: 15px;
         font-size: 0.9rem;
         color: #e9ecef;
     }
+    .details-spoiler .details-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+    }
+    .details-spoiler .question-thumb {
+        max-height: 200px;
+        object-fit: contain;
+        border-radius: 6px;
+        border: 1px solid #495057;
+    }
+    .details-spoiler .note-thumb {
+        max-height: 200px;
+        object-fit: contain;
+        border-radius: 6px;
+        border: 2px solid #0dcaf0;
+        background: #fff;
+    }
+    .note-section {
+        background: rgba(13, 202, 240, 0.1);
+        border-radius: 8px;
+        padding: 10px;
+        margin-top: 10px;
+    }
+    .note-section h6 {
+        color: #0dcaf0;
+        margin-bottom: 8px;
+    }
+    @media (max-width: 768px) {
+        .details-spoiler .details-grid {
+            grid-template-columns: 1fr;
+        }
+    }
 
     /* --- BUTTON STYLES --- */
     .btn-pill { border-radius: 50px; }
@@ -162,8 +195,20 @@
 
     <!-- 3. Details (Hidden by default) -->
     <div class="details-spoiler" id="details-spoiler">
-        <h6 class="text-white">Details</h6>
-        <div id="details-content"></div>
+        <div class="details-grid">
+            <div>
+                <h6 class="text-white mb-2"><i class="bi bi-image me-1"></i>Question</h6>
+                <img id="details-question-img" src="" class="question-thumb" alt="Question">
+            </div>
+            <div id="details-info">
+                <h6 class="text-white mb-2"><i class="bi bi-info-circle me-1"></i>Details</h6>
+                <div id="details-content"></div>
+            </div>
+        </div>
+        <div id="note-section" class="note-section" style="display: none;">
+            <h6><i class="bi bi-journal-text me-1"></i>Revision Notes</h6>
+            <img id="details-note-img" src="" class="note-thumb" alt="Revision Note">
+        </div>
     </div>
 
     <!-- 4. Controls -->
@@ -320,10 +365,23 @@ document.addEventListener('DOMContentLoaded', () => {
 
         // Details
         const d = q.details;
-        let h = `<strong>Sub:</strong> ${d.subject} <br> <strong>Topic:</strong> ${d.topic}`;
-        if(d.options) { h += '<ol type="A" style="padding-left:15px; margin:5px 0;">'; d.options.forEach(o=>h+=`<li>${o}</li>`); h+='</ol>'; }
+        let h = `<strong>Subject:</strong> ${d.subject || 'N/A'} <br> <strong>Topic:</strong> ${d.topic || 'N/A'}`;
+        if(d.options && d.options.length) { h += '<ol type="A" style="padding-left:15px; margin:5px 0;">'; d.options.forEach(o=>h+=`<li>${o}</li>`); h+='</ol>'; }
         document.getElementById('details-content').innerHTML = h;
 
+        // Set question thumbnail in details panel
+        document.getElementById('details-question-img').src = path;
+
+        // Set revision note if available
+        const noteSection = document.getElementById('note-section');
+        const noteImg = document.getElementById('details-note-img');
+        if (d.note_filename) {
+            noteImg.src = `/neetprep/processed/${d.note_filename}`;
+            noteSection.style.display = 'block';
+        } else {
+            noteSection.style.display = 'none';
+        }
+
         // Overlays
         const fmt = v => typeof v==='number'?String.fromCharCode(65+v):v;
         yourOv.textContent = `You: ${fmt(d.user_answer_index)}`;