modification du monitoring enseignant
This commit is contained in:
nicoboy
@ -1,7 +1,7 @@
|
||||
<?php
|
||||
/**
|
||||
* MATRICE MONITORING TEMPS RÉEL - ENSEIGNANT
|
||||
* Supervision élèves pendant passage évaluation
|
||||
* MATRICE MONITORING TEMPS RÉEL - VERSION AMÉLIORÉE
|
||||
* 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 {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
.eleve-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
thead {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
.eleve-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
thead th {
|
||||
padding: 15px 10px;
|
||||
text-align: left;
|
||||
.eleve-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.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 {
|
||||
text-align: center;
|
||||
min-width: 40px;
|
||||
}
|
||||
.status-en-ligne { background: #d4edda; color: #155724; }
|
||||
.status-en-cours { background: #fff3cd; color: #856404; }
|
||||
.status-inactif { background: #fff3cd; color: #856404; }
|
||||
.status-hors-ligne { background: #f8d7da; color: #721c24; }
|
||||
.status-termine { background: #e2e3e5; color: #383d41; }
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
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-section {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.eleve-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.eleve-classe {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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 {
|
||||
background: white;
|
||||
padding: 15px 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
margin-top: 20px;
|
||||
.matrix-legend {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin-top: 10px;
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.legende-title {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.legende-item {
|
||||
.matrix-legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-retour {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
background: white;
|
||||
color: #667eea;
|
||||
border: 2px solid #667eea;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: background 0.2s;
|
||||
font-weight: 600;
|
||||
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 -->
|
||||
<div class="monitoring-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<!-- Grille élèves -->
|
||||
<div class="eleves-grid" id="elevesGrid">
|
||||
<div class="no-data">
|
||||
🔄 Chargement des données...
|
||||
</div>
|
||||
</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>En ligne (<1 min)</span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: #f8f9fa; border-radius: 4px;"></span>
|
||||
<span>Non répondu</span>
|
||||
</div>
|
||||
<div class="legende-item">
|
||||
<span class="status-indicator status-en-cours"></span>
|
||||
<span>En cours (<3 min)</span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: #cce5ff; border-radius: 4px;"></span>
|
||||
<span>✅ Répondu</span>
|
||||
</div>
|
||||
<div class="legende-item">
|
||||
<span class="status-indicator status-inactif"></span>
|
||||
<span>Inactif (3-5 min)</span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: #d4edda; border-radius: 4px;"></span>
|
||||
<span>✔️ Correct</span>
|
||||
</div>
|
||||
<div class="legende-item">
|
||||
<span class="status-indicator status-hors-ligne"></span>
|
||||
<span>Hors ligne (>5 min)</span>
|
||||
<span style="display: inline-block; width: 20px; height: 20px; background: #f8d7da; border-radius: 4px;"></span>
|
||||
<span>❌ Incorrect</span>
|
||||
</div>
|
||||
<div class="legende-item" style="margin-left: 20px;">
|
||||
<span>🟢 En ligne (<1min)</span>
|
||||
</div>
|
||||
<div class="legende-item">
|
||||
<span class="status-indicator status-termine"></span>
|
||||
<span>Terminé</span>
|
||||
<span>🟡 En cours (<3min)</span>
|
||||
</div>
|
||||
<div class="legende-item" style="margin-left: 30px;">
|
||||
<span>⬜ Vide</span>
|
||||
<span style="margin-left: 15px;">✅ Répondu</span>
|
||||
<span style="margin-left: 15px;">✔️ Correct</span>
|
||||
<span style="margin-left: 15px;">❌ Incorrect</span>
|
||||
<div class="legende-item">
|
||||
<span>🔴 Inactif (>3min)</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) {
|
||||
const tbody = document.getElementById('monitoringBody');
|
||||
function updateElevesGrid(tentatives) {
|
||||
const grid = document.getElementById('elevesGrid');
|
||||
|
||||
if (tentatives.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="${5 + NB_QUESTIONS}" class="no-data">
|
||||
📭 Aucun élève n'a encore commencé cette évaluation
|
||||
</td>
|
||||
</tr>
|
||||
grid.innerHTML = `
|
||||
<div class="no-data">
|
||||
📭 Aucun élève n'a encore commencé cette évaluation
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = tentatives.map(t => `
|
||||
<tr>
|
||||
<td>
|
||||
<span class="status-indicator status-${t.statut_connexion}"></span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="eleve-name">${escapeHtml(t.nom)} ${escapeHtml(t.prenom)}</div>
|
||||
<span class="eleve-classe">${escapeHtml(t.classe || 'Libre')}</span>
|
||||
</td>
|
||||
<td>
|
||||
grid.innerHTML = tentatives.map(t => createEleveCard(t)).join('');
|
||||
|
||||
// Ajouter tooltips sur cellules questions
|
||||
addQuestionTooltips();
|
||||
}
|
||||
|
||||
function createEleveCard(tentative) {
|
||||
const statusLabels = {
|
||||
'en-ligne': '🟢 En ligne',
|
||||
'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}%">
|
||||
${t.pourcentage_progression}%
|
||||
<div class="progress-bar" style="width: ${tentative.pourcentage_progression}%">
|
||||
${tentative.pourcentage_progression}%
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-text">${t.nb_reponses}/${NB_QUESTIONS} questions</div>
|
||||
</td>
|
||||
<td class="time-info">
|
||||
⏱️ ${t.temps_ecoule}
|
||||
</td>
|
||||
<td class="time-info">
|
||||
${t.derniere_activite}
|
||||
</td>
|
||||
${t.reponses_details.map(r => `
|
||||
<td class="question-cell" title="${r.tooltip}">
|
||||
${r.icone}
|
||||
</td>
|
||||
`).join('')}
|
||||
</tr>
|
||||
`).join('');
|
||||
<div class="progress-text">${tentative.nb_reponses}/${NB_QUESTIONS} questions répondues</div>
|
||||
</div>
|
||||
|
||||
<!-- Temps -->
|
||||
<div class="time-info">
|
||||
<span>⏱️ Temps écoulé: ${tentative.temps_ecoule}</span>
|
||||
<span>🕐 Activité: ${tentative.derniere_activite}</span>
|
||||
</div>
|
||||
|
||||
<!-- Matrice questions -->
|
||||
<div class="questions-matrix">
|
||||
${createQuestionsMatrix(tentative.reponses_details)}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user