modification du monitoring enseignant

enseignant/monitoring.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * MATRICE MONITORING TEMPS RÉEL - ENSEIGNANT
+ * MATRICE MONITORING TEMPS RÉEL - VERSION AMÉLIORÉE
- * Supervision élèves pendant passage évaluation
+ * Affichage matriciel des questions pour éviter débordement horizontal
  */
 
 require_once '../config/config.php';
@@ -42,6 +42,10 @@ try {
     $questions = $stmt->fetchAll(PDO::FETCH_ASSOC);
     $nb_questions = count($questions);
     
+    // Calculer dimensions matrice optimales (proche du carré)
+    $cols = ceil(sqrt($nb_questions));
+    $rows = ceil($nb_questions / $cols);
+    
 } catch (Exception $e) {
     die('Erreur: ' . $e->getMessage());
 }
@@ -67,7 +71,7 @@ try {
         }
         
         .container {
-            max-width: 1400px;
+            max-width: 1600px;
             margin: 0 auto;
         }
         
@@ -133,79 +137,73 @@ try {
             margin-top: 5px;
         }
         
-        .monitoring-table {
+        /* Cards élèves */
+        .eleves-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+            gap: 20px;
+        }
+        
+        .eleve-card {
             background: white;
             border-radius: 10px;
             box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            overflow: hidden;
+            padding: 20px;
+            transition: transform 0.2s, box-shadow 0.2s;
         }
         
-        table {
+        .eleve-card:hover {
-            width: 100%;
+            transform: translateY(-5px);
-            border-collapse: collapse;
+            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
         }
         
-        thead {
+        .eleve-header {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
-            color: white;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            padding-bottom: 15px;
+            border-bottom: 2px solid #f0f0f0;
         }
         
-        thead th {
+        .eleve-info {
-            padding: 15px 10px;
+            flex: 1;
-            text-align: left;
+        }
+        
+        .eleve-name {
+            font-size: 18px;
             font-weight: 600;
+            color: #333;
+            margin-bottom: 5px;
+        }
+        
+        .eleve-classe {
             font-size: 14px;
+            color: #666;
+        }
+        
+        .status-badge {
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
             white-space: nowrap;
         }
         
-        thead th.question-col {
+        .status-en-ligne { background: #d4edda; color: #155724; }
-            text-align: center;
+        .status-en-cours { background: #fff3cd; color: #856404; }
-            min-width: 40px;
+        .status-inactif { background: #fff3cd; color: #856404; }
-        }
+        .status-hors-ligne { background: #f8d7da; color: #721c24; }
+        .status-termine { background: #e2e3e5; color: #383d41; }
         
-        tbody tr {
+        .progress-section {
-            border-bottom: 1px solid #f0f0f0;
+            margin-bottom: 15px;
-            transition: background 0.2s;
-        }
-        
-        tbody tr:hover {
-            background: #f8f9fa;
-        }
-        
-        tbody td {
-            padding: 12px 10px;
-            font-size: 14px;
-        }
-        
-        .status-indicator {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            display: inline-block;
-            margin-right: 8px;
-        }
-        
-        .status-en-ligne { background: #28a745; }
-        .status-en-cours { background: #ffc107; }
-        .status-inactif { background: #fd7e14; }
-        .status-hors-ligne { background: #dc3545; }
-        .status-termine { background: #6c757d; }
-        
-        .question-cell {
-            text-align: center;
-            font-size: 18px;
-            cursor: pointer;
-            transition: transform 0.2s;
-        }
-        
-        .question-cell:hover {
-            transform: scale(1.2);
         }
         
         .progress-bar-container {
             background: #e9ecef;
             border-radius: 10px;
-            height: 20px;
+            height: 25px;
             overflow: hidden;
             position: relative;
         }
@@ -213,73 +211,107 @@ try {
         .progress-bar {
             height: 100%;
             background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
-            transition: width 0.3s ease;
+            transition: width 0.5s ease;
             display: flex;
             align-items: center;
             justify-content: center;
             color: white;
-            font-size: 11px;
+            font-size: 13px;
             font-weight: bold;
         }
         
         .progress-text {
-            font-size: 12px;
+            font-size: 13px;
             color: #666;
-            margin-top: 3px;
+            margin-top: 5px;
-        }
+            text-align: center;
-        
-        .eleve-name {
-            font-weight: 600;
-            color: #333;
-        }
-        
-        .eleve-classe {
-            font-size: 12px;
-            color: #666;
-            display: block;
         }
         
         .time-info {
+            display: flex;
+            justify-content: space-between;
             font-size: 12px;
             color: #666;
+            margin-bottom: 15px;
+        }
+        
+        /* Matrice questions */
+        .questions-matrix {
+            display: grid;
+            grid-template-columns: repeat(<?= $cols ?>, 1fr);
+            gap: 4px;
+            margin-top: 10px;
+        }
+        
+        .question-cell {
+            aspect-ratio: 1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+            background: #f8f9fa;
+            position: relative;
+        }
+        
+        .question-cell:hover {
+            transform: scale(1.15);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            z-index: 10;
+        }
+        
+        .question-cell.repondu {
+            background: #cce5ff;
+        }
+        
+        .question-cell.correct {
+            background: #d4edda;
+        }
+        
+        .question-cell.incorrect {
+            background: #f8d7da;
+        }
+        
+        .question-number {
+            position: absolute;
+            top: 2px;
+            left: 3px;
+            font-size: 8px;
+            font-weight: 600;
+            color: #666;
         }
         
-        .legende {
+        .matrix-legend {
-            background: white;
-            padding: 15px 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            margin-top: 20px;
             display: flex;
-            gap: 30px;
+            justify-content: center;
-            flex-wrap: wrap;
+            gap: 15px;
-            align-items: center;
+            margin-top: 10px;
+            font-size: 11px;
+            color: #666;
         }
         
-        .legende-title {
+        .matrix-legend-item {
-            font-weight: 600;
-            color: #333;
-        }
-        
-        .legende-item {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 5px;
-            font-size: 14px;
         }
         
         .btn-retour {
-            background: #6c757d;
+            background: white;
-            color: white;
+            color: #667eea;
+            border: 2px solid #667eea;
             padding: 10px 20px;
-            border-radius: 5px;
+            border-radius: 8px;
             text-decoration: none;
-            font-size: 14px;
+            font-weight: 600;
-            transition: background 0.2s;
+            transition: all 0.3s;
         }
         
         .btn-retour:hover {
-            background: #5a6268;
+            background: #667eea;
+            color: white;
         }
         
         @keyframes spin {
@@ -292,9 +324,50 @@ try {
         
         .no-data {
             text-align: center;
-            padding: 40px;
+            padding: 60px 20px;
             color: #666;
             font-size: 16px;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        
+        /* Légende globale */
+        .legende {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            margin-top: 20px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            align-items: center;
+            font-size: 13px;
+        }
+        
+        .legende-title {
+            font-weight: 600;
+            color: #333;
+        }
+        
+        .legende-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        
+        .tooltip {
+            position: absolute;
+            background: rgba(0,0,0,0.9);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            white-space: nowrap;
+            pointer-events: none;
+            z-index: 1000;
+            display: none;
         }
     </style>
 </head>
@@ -307,6 +380,9 @@ try {
                 <span style="font-size: 18px; font-weight: normal; color: #666;">
                     - <?= htmlspecialchars($evaluation['titre']) ?>
                 </span>
+                <span style="font-size: 14px; font-weight: normal; color: #999;">
+                    (<?= $nb_questions ?> questions - matrice <?= $rows ?>×<?= $cols ?>)
+                </span>
             </h1>
             <div style="display: flex; gap: 15px; align-items: center;">
                 <div class="refresh-indicator" id="refreshIndicator">
@@ -341,68 +417,51 @@ try {
             </div>
         </div>
         
-        <!-- Tableau monitoring -->
+        <!-- Grille élèves -->
-        <div class="monitoring-table">
+        <div class="eleves-grid" id="elevesGrid">
-            <table>
+            <div class="no-data">
-                <thead>
+                🔄 Chargement des données...
-                    <tr>
+            </div>
-                        <th style="width: 40px;">Statut</th>
-                        <th style="width: 200px;">Élève</th>
-                        <th style="width: 200px;">Progression</th>
-                        <th style="width: 120px;">Temps écoulé</th>
-                        <th style="width: 120px;">Dernière activité</th>
-                        <?php foreach ($questions as $q): ?>
-                            <th class="question-col" title="<?= htmlspecialchars($q['enonce']) ?>">
-                                Q<?= $q['ordre'] ?>
-                            </th>
-                        <?php endforeach; ?>
-                    </tr>
-                </thead>
-                <tbody id="monitoringBody">
-                    <tr>
-                        <td colspan="<?= 5 + $nb_questions ?>" class="no-data">
-                            🔄 Chargement des données...
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
         </div>
         
         <!-- Légende -->
         <div class="legende">
             <div class="legende-title">Légende :</div>
             <div class="legende-item">
-                <span class="status-indicator status-en-ligne"></span>
+                <span style="display: inline-block; width: 20px; height: 20px; background: #f8f9fa; border-radius: 4px;"></span>
-                <span>En ligne (&lt;1 min)</span>
+                <span>Non répondu</span>
             </div>
             <div class="legende-item">
-                <span class="status-indicator status-en-cours"></span>
+                <span style="display: inline-block; width: 20px; height: 20px; background: #cce5ff; border-radius: 4px;"></span>
-                <span>En cours (&lt;3 min)</span>
+                <span>✅ Répondu</span>
             </div>
             <div class="legende-item">
-                <span class="status-indicator status-inactif"></span>
+                <span style="display: inline-block; width: 20px; height: 20px; background: #d4edda; border-radius: 4px;"></span>
-                <span>Inactif (3-5 min)</span>
+                <span>✔️ Correct</span>
             </div>
             <div class="legende-item">
-                <span class="status-indicator status-hors-ligne"></span>
+                <span style="display: inline-block; width: 20px; height: 20px; background: #f8d7da; border-radius: 4px;"></span>
-                <span>Hors ligne (&gt;5 min)</span>
+                <span>❌ Incorrect</span>
+            </div>
+            <div class="legende-item" style="margin-left: 20px;">
+                <span>🟢 En ligne (&lt;1min)</span>
             </div>
             <div class="legende-item">
-                <span class="status-indicator status-termine"></span>
+                <span>🟡 En cours (&lt;3min)</span>
-                <span>Terminé</span>
             </div>
-            <div class="legende-item" style="margin-left: 30px;">
+            <div class="legende-item">
-                <span>⬜ Vide</span>
+                <span>🔴 Inactif (&gt;3min)</span>
-                <span style="margin-left: 15px;">✅ Répondu</span>
-                <span style="margin-left: 15px;">✔️ Correct</span>
-                <span style="margin-left: 15px;">❌ Incorrect</span>
             </div>
         </div>
     </div>
     
+    <!-- Tooltip -->
+    <div class="tooltip" id="tooltip"></div>
+    
     <script>
         const ID_EVALUATION = <?= $id_evaluation ?>;
         const NB_QUESTIONS = <?= $nb_questions ?>;
+        const MATRIX_COLS = <?= $cols ?>;
         let refreshInterval;
         
         // Charger données initiales
@@ -426,7 +485,7 @@ try {
                 .then(data => {
                     if (data.success) {
                         updateStats(data.stats);
-                        updateTable(data.tentatives);
+                        updateElevesGrid(data.tentatives);
                         
                         // Animation succès
                         refreshIcon.textContent = '✅';
@@ -460,50 +519,111 @@ try {
             document.getElementById('statTermines').textContent = stats.termine;
         }
         
-        function updateTable(tentatives) {
+        function updateElevesGrid(tentatives) {
-            const tbody = document.getElementById('monitoringBody');
+            const grid = document.getElementById('elevesGrid');
             
             if (tentatives.length === 0) {
-                tbody.innerHTML = `
+                grid.innerHTML = `
-                    <tr>
+                    <div class="no-data">
-                        <td colspan="${5 + NB_QUESTIONS}" class="no-data">
+                        📭 Aucun élève n'a encore commencé cette évaluation
-                            📭 Aucun élève n'a encore commencé cette évaluation
+                    </div>
-                        </td>
-                    </tr>
                 `;
                 return;
             }
             
-            tbody.innerHTML = tentatives.map(t => `
+            grid.innerHTML = tentatives.map(t => createEleveCard(t)).join('');
-                <tr>
+            
-                    <td>
+            // Ajouter tooltips sur cellules questions
-                        <span class="status-indicator status-${t.statut_connexion}"></span>
+            addQuestionTooltips();
-                    </td>
+        }
-                    <td>
+        
-                        <div class="eleve-name">${escapeHtml(t.nom)} ${escapeHtml(t.prenom)}</div>
+        function createEleveCard(tentative) {
-                        <span class="eleve-classe">${escapeHtml(t.classe || 'Libre')}</span>
+            const statusLabels = {
-                    </td>
+                'en-ligne': '🟢 En ligne',
-                    <td>
+                'en-cours': '🟡 En cours',
+                'inactif': '🟠 Inactif',
+                'hors-ligne': '🔴 Hors ligne',
+                'termine': '⚫ Terminé'
+            };
+            
+            return `
+                <div class="eleve-card">
+                    <!-- Header -->
+                    <div class="eleve-header">
+                        <div class="eleve-info">
+                            <div class="eleve-name">${escapeHtml(tentative.nom)} ${escapeHtml(tentative.prenom)}</div>
+                            <div class="eleve-classe">${escapeHtml(tentative.classe || 'Libre')}</div>
+                        </div>
+                        <div class="status-badge status-${tentative.statut_connexion}">
+                            ${statusLabels[tentative.statut_connexion] || tentative.statut_connexion}
+                        </div>
+                    </div>
+                    
+                    <!-- Progression -->
+                    <div class="progress-section">
                         <div class="progress-bar-container">
-                            <div class="progress-bar" style="width: ${t.pourcentage_progression}%">
+                            <div class="progress-bar" style="width: ${tentative.pourcentage_progression}%">
-                                ${t.pourcentage_progression}%
+                                ${tentative.pourcentage_progression}%
                             </div>
                         </div>
-                        <div class="progress-text">${t.nb_reponses}/${NB_QUESTIONS} questions</div>
+                        <div class="progress-text">${tentative.nb_reponses}/${NB_QUESTIONS} questions répondues</div>
-                    </td>
+                    </div>
-                    <td class="time-info">
+                    
-                        ⏱️ ${t.temps_ecoule}
+                    <!-- Temps -->
-                    </td>
+                    <div class="time-info">
-                    <td class="time-info">
+                        <span>⏱️ Temps écoulé: ${tentative.temps_ecoule}</span>
-                        ${t.derniere_activite}
+                        <span>🕐 Activité: ${tentative.derniere_activite}</span>
-                    </td>
+                    </div>
-                    ${t.reponses_details.map(r => `
+                    
-                        <td class="question-cell" title="${r.tooltip}">
+                    <!-- Matrice questions -->
-                            ${r.icone}
+                    <div class="questions-matrix">
-                        </td>
+                        ${createQuestionsMatrix(tentative.reponses_details)}
-                    `).join('')}
+                    </div>
-                </tr>
+                </div>
-            `).join('');
+            `;
+        }
+        
+        function createQuestionsMatrix(reponses) {
+            let html = '';
+            
+            for (let i = 0; i < NB_QUESTIONS; i++) {
+                const reponse = reponses[i] || {};
+                const classe = reponse.classe || '';
+                const icone = reponse.icone || '⬜';
+                const tooltip = reponse.tooltip || `Question ${i + 1}`;
+                
+                html += `
+                    <div class="question-cell ${classe}" 
+                         data-question="${i + 1}"
+                         data-tooltip="${escapeHtml(tooltip)}">
+                        <span class="question-number">${i + 1}</span>
+                        <span>${icone}</span>
+                    </div>
+                `;
+            }
+            
+            return html;
+        }
+        
+        function addQuestionTooltips() {
+            const tooltip = document.getElementById('tooltip');
+            const cells = document.querySelectorAll('.question-cell');
+            
+            cells.forEach(cell => {
+                cell.addEventListener('mouseenter', (e) => {
+                    const tooltipText = cell.dataset.tooltip;
+                    tooltip.textContent = tooltipText;
+                    tooltip.style.display = 'block';
+                    
+                    const rect = cell.getBoundingClientRect();
+                    tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
+                    tooltip.style.top = rect.top - tooltip.offsetHeight - 5 + 'px';
+                });
+                
+                cell.addEventListener('mouseleave', () => {
+                    tooltip.style.display = 'none';
+                });
+            });
         }
         
         function escapeHtml(text) {
@@ -520,4 +640,4 @@ try {
         });
     </script>
 </body>
-</html>
+</html>