JezK
Edit File: test_edit_features.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Test Edit Features</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <style> body { padding: 2rem; background-color: #f8f9fa; } .test-section { background: white; border-radius: 10px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .feature-list { list-style: none; padding: 0; } .feature-list li { padding: 0.5rem 0; border-bottom: 1px solid #eee; } .feature-list li:last-child { border-bottom: none; } .feature-list li:before { content: "✅ "; color: #28a745; font-weight: bold; } </style> </head> <body> <div class="container"> <h1 class="mb-4">Test Edit Features</h1> <div class="test-section"> <h3>New Features Added</h3> <ul class="feature-list"> <li><strong>Section Reordering:</strong> Drag and drop sections to reorder them</li> <li><strong>Question Reordering:</strong> Drag and drop questions within sections</li> <li><strong>Section Editing:</strong> Edit section name, description, and marks</li> <li><strong>Question Editing:</strong> Edit question text and options</li> <li><strong>Visual Drag Handles:</strong> Clear drag handles for reordering</li> <li><strong>Save Order Buttons:</strong> Dedicated buttons to save reordering</li> <li><strong>Edit Modals:</strong> Modal forms for editing sections and questions</li> <li><strong>Database Integration:</strong> All changes saved to database with proper ordering</li> </ul> </div> <div class="test-section"> <h3>Database Migration</h3> <p>Before testing, you need to run the database migration to add the display_order columns:</p> <div class="alert alert-warning"> <strong>Important:</strong> Run the SQL script <code>aimind/add_display_order.sql</code> in your database first! </div> <a href="add_display_order.sql" class="btn btn-warning" target="_blank">View Migration Script</a> </div> <div class="test-section"> <h3>Test the Features</h3> <p>Open the quiz editor to test all the new features:</p> <div class="mb-3"> <label for="quizId" class="form-label">Quiz ID to test:</label> <input type="number" class="form-control" id="quizId" value="1" style="width: 200px;"> </div> <a href="#" class="btn btn-primary" onclick="openQuizEditor()">Open Quiz Editor</a> </div> <div class="test-section"> <h3>Testing Checklist</h3> <div class="row"> <div class="col-md-6"> <h5>Section Features:</h5> <ul> <li>✅ Click "Reorder Sections" button</li> <li>✅ Drag sections using the grip handle</li> <li>✅ Click "Save Order" to save changes</li> <li>✅ Click edit button (pencil icon) on a section</li> <li>✅ Modify section details in the modal</li> <li>✅ Save changes and verify they appear</li> </ul> </div> <div class="col-md-6"> <h5>Question Features:</h5> <ul> <li>✅ Expand a section with questions</li> <li>✅ Click "Reorder Questions" button</li> <li>✅ Drag questions using the grip handle</li> <li>✅ Click "Save Question Order" to save changes</li> <li>✅ Click edit button (pencil icon) on a question</li> <li>✅ Modify question text and options</li> <li>✅ Change the correct answer</li> <li>✅ Save changes and verify they appear</li> </ul> </div> </div> </div> <div class="test-section"> <h3>Expected Behavior</h3> <ul> <li><strong>Reordering:</strong> Drag handles appear when reorder mode is enabled</li> <li><strong>Visual Feedback:</strong> Items show ghost effect while dragging</li> <li><strong>Persistence:</strong> Order changes are saved to database</li> <li><strong>Editing:</strong> Modals open with current data pre-filled</li> <li><strong>Validation:</strong> Required fields are enforced</li> <li><strong>Success Messages:</strong> Green success alerts appear after operations</li> </ul> </div> <div class="test-section"> <h3>Troubleshooting</h3> <div class="alert alert-info"> <strong>If features don't work:</strong> <ol> <li>Make sure you've run the database migration script</li> <li>Check browser console for JavaScript errors</li> <li>Verify that SortableJS library is loading</li> <li>Ensure you have sections and questions to test with</li> </ol> </div> </div> </div> <script> function openQuizEditor() { const quizId = document.getElementById('quizId').value; window.open(`admin/edit_quiz.php?id=${quizId}`, '_blank'); } </script> </body> </html>