modification du dashboard eleve avec stats
This commit is contained in:
nicoboy
@ -1,7 +1,7 @@
|
||||
<?php
|
||||
/**
|
||||
* Dashboard élève (classe fixe + libre)
|
||||
* Fichier : eleve/dashboard.php
|
||||
* Dashboard élève - VERSION AMÉLIORÉE
|
||||
* Avec historique des 4 dernières évaluations et graphique de progression
|
||||
*/
|
||||
|
||||
require_once __DIR__ . '/../config/config.php';
|
||||
@ -27,9 +27,8 @@ $db = Database::getInstance();
|
||||
$isEleveLibre = ($user['id_type'] == 3);
|
||||
$isEleveClasse = ($user['id_type'] == 2);
|
||||
|
||||
// Récupérer les évaluations disponibles
|
||||
// Récupérer les évaluations disponibles (non encore passées)
|
||||
if ($isEleveLibre) {
|
||||
// Élève libre : évaluations de type soutien uniquement
|
||||
$queryEvals = "SELECT DISTINCT e.*,
|
||||
COALESCE(t.statut, 'non_commence') as statut_tentative,
|
||||
t.note as note_obtenue,
|
||||
@ -48,7 +47,6 @@ if ($isEleveLibre) {
|
||||
$evaluations = $db->fetchAll($queryEvals, [$user['id_utilisateur']]);
|
||||
|
||||
} else {
|
||||
// Élève classe fixe : évaluations de sa classe
|
||||
if ($user['id_classe']) {
|
||||
$queryEvals = "SELECT DISTINCT e.*,
|
||||
ae.date_debut as debut_acces,
|
||||
@ -72,15 +70,53 @@ if ($isEleveLibre) {
|
||||
}
|
||||
}
|
||||
|
||||
// Récupérer les statistiques de l'élève
|
||||
// Récupérer les 4 dernières évaluations terminées
|
||||
$query4Dernieres = "SELECT
|
||||
e.id_evaluation,
|
||||
e.titre,
|
||||
e.chapitre,
|
||||
te.note,
|
||||
te.pourcentage,
|
||||
te.date_fin,
|
||||
te.temps_passe_secondes,
|
||||
(SELECT COUNT(*) FROM questions WHERE id_evaluation = e.id_evaluation) as nb_questions
|
||||
FROM tentatives_eleves te
|
||||
INNER JOIN evaluations e ON te.id_evaluation = e.id_evaluation
|
||||
WHERE te.id_eleve = ?
|
||||
AND te.statut = 'terminee'
|
||||
ORDER BY te.date_fin DESC
|
||||
LIMIT 4";
|
||||
|
||||
$dernieresEvals = $db->fetchAll($query4Dernieres, [$user['id_utilisateur']]);
|
||||
|
||||
// Calculer la moyenne des 4 dernières
|
||||
$moyenne4Dernieres = 0;
|
||||
if (!empty($dernieresEvals)) {
|
||||
$somme = array_sum(array_column($dernieresEvals, 'note'));
|
||||
$moyenne4Dernieres = $somme / count($dernieresEvals);
|
||||
}
|
||||
|
||||
// Récupérer TOUTES les évaluations terminées pour le graphique
|
||||
$queryToutesEvals = "SELECT
|
||||
e.id_evaluation,
|
||||
e.titre,
|
||||
e.chapitre,
|
||||
te.note,
|
||||
te.pourcentage,
|
||||
te.date_fin
|
||||
FROM tentatives_eleves te
|
||||
INNER JOIN evaluations e ON te.id_evaluation = e.id_evaluation
|
||||
WHERE te.id_eleve = ?
|
||||
AND te.statut = 'terminee'
|
||||
ORDER BY te.date_fin ASC";
|
||||
|
||||
$toutesEvals = $db->fetchAll($queryToutesEvals, [$user['id_utilisateur']]);
|
||||
|
||||
// Récupérer les statistiques générales
|
||||
$queryStats = "SELECT
|
||||
COUNT(DISTINCT t.id_evaluation) as nb_evaluations_passees,
|
||||
COUNT(CASE WHEN t.statut = 'terminee' THEN 1 END) as nb_evaluations_terminees,
|
||||
AVG(
|
||||
CASE WHEN t.statut = 'terminee'
|
||||
THEN CEILING((t.note / e.note_totale * 20) * 2) / 2
|
||||
ELSE NULL END
|
||||
) as moyenne_generale
|
||||
AVG(CASE WHEN t.statut = 'terminee' THEN t.note ELSE NULL END) as moyenne_generale
|
||||
FROM tentatives_eleves t
|
||||
INNER JOIN evaluations e ON t.id_evaluation = e.id_evaluation
|
||||
WHERE t.id_eleve = ?";
|
||||
@ -98,6 +134,7 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard Élève - <?= htmlspecialchars($user['prenom'] . ' ' . $user['nom']) ?></title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@ -119,7 +156,7 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -161,14 +198,14 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
max-width: 1400px;
|
||||
margin: 30px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@ -195,6 +232,128 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.stat-card .sub-value {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* Historique 4 dernières évaluations */
|
||||
.historique-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dernieres-evals-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.eval-card-small {
|
||||
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
transition: all 0.3s;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.eval-card-small:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 15px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
.eval-card-small h4 {
|
||||
color: #333;
|
||||
font-size: 15px;
|
||||
margin-bottom: 10px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.eval-card-small .chapitre {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.note-display-large {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.note-fraction {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.note-sur-20 {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.eval-card-small .date {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.moyenne-4 {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.moyenne-4 h3 {
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.moyenne-4 .value {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Graphique progression */
|
||||
.graph-section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Évaluations disponibles */
|
||||
.section {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
@ -203,14 +362,6 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.eval-grid {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
@ -326,6 +477,13 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
border-color: #2196f3;
|
||||
color: #1565c0;
|
||||
}
|
||||
|
||||
.no-data-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -347,7 +505,7 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<!-- STATISTIQUES -->
|
||||
<!-- STATISTIQUES GLOBALES -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h3>📚 Évaluations passées</h3>
|
||||
@ -366,6 +524,11 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
? number_format($stats['moyenne_generale'], 2) . '/20'
|
||||
: '-' ?>
|
||||
</div>
|
||||
<?php if (!empty($toutesEvals) && count($toutesEvals) > 1): ?>
|
||||
<div class="sub-value">
|
||||
Sur <?= count($toutesEvals) ?> évaluation<?= count($toutesEvals) > 1 ? 's' : '' ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -378,6 +541,67 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- HISTORIQUE 4 DERNIÈRES ÉVALUATIONS -->
|
||||
<?php if (!empty($dernieresEvals)): ?>
|
||||
<div class="historique-section">
|
||||
<h2 class="section-title">
|
||||
<span>📋 Mes 4 dernières évaluations</span>
|
||||
</h2>
|
||||
|
||||
<div class="dernieres-evals-grid">
|
||||
<?php foreach ($dernieresEvals as $eval): ?>
|
||||
<div class="eval-card-small">
|
||||
<h4 title="<?= htmlspecialchars($eval['titre']) ?>">
|
||||
<?= htmlspecialchars($eval['titre']) ?>
|
||||
</h4>
|
||||
<div class="chapitre">
|
||||
<?= htmlspecialchars($eval['chapitre'] ?? 'Non spécifié') ?>
|
||||
</div>
|
||||
|
||||
<div class="note-display-large">
|
||||
<div>
|
||||
<div class="note-fraction">
|
||||
<?= number_format($eval['note'], 1) ?>/<?= $eval['nb_questions'] ?> questions
|
||||
</div>
|
||||
<div class="note-sur-20">
|
||||
<?= number_format($eval['note'], 2) ?>/20
|
||||
</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div class="note-fraction">
|
||||
<?= round($eval['pourcentage']) ?>%
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #999;">
|
||||
⏱️ <?= gmdate('i:s', $eval['temps_passe_secondes']) ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="date">
|
||||
<?= date('d/m/Y à H:i', strtotime($eval['date_fin'])) ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<!-- Moyenne des 4 dernières -->
|
||||
<div class="moyenne-4">
|
||||
<h3>Moyenne sur ces 4 évaluations</h3>
|
||||
<div class="value"><?= number_format($moyenne4Dernieres, 2) ?>/20</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- GRAPHIQUE PROGRESSION -->
|
||||
<?php if (!empty($toutesEvals) && count($toutesEvals) > 1): ?>
|
||||
<div class="graph-section">
|
||||
<h2 class="section-title">📈 Ma progression</h2>
|
||||
<div class="chart-container">
|
||||
<canvas id="progressionChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- ÉVALUATIONS DISPONIBLES -->
|
||||
<div class="section">
|
||||
<h2 class="section-title">📝 Évaluations disponibles</h2>
|
||||
@ -401,7 +625,6 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
<p>
|
||||
<strong>Chapitre :</strong> <?= htmlspecialchars($eval['chapitre'] ?? 'Non spécifié') ?>
|
||||
| <strong>Durée :</strong> <?= $eval['duree_minutes'] ?? 'Libre' ?> min
|
||||
| <strong>Note :</strong> /<?= $eval['note_totale'] ?? 20 ?>
|
||||
</p>
|
||||
<?php if (isset($eval['fin_acces'])): ?>
|
||||
<p style="color: #f57c00;">
|
||||
@ -417,10 +640,10 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
|
||||
<?php if ($statut === 'terminee'): ?>
|
||||
<span class="note-display">
|
||||
<?= number_format($eval['note_obtenue'], 2) ?>/<?= $eval['note_totale'] ?? 20 ?>
|
||||
<?= number_format($eval['note_obtenue'], 2) ?>/20
|
||||
</span>
|
||||
<span class="status-badge status-termine">✅ Terminé</span>
|
||||
<a href="../resultats.php?id_evaluation=<?= $eval['id_evaluation'] ?>"
|
||||
<a href="../voir_resultat.php?id_evaluation=<?= $eval['id_evaluation'] ?>"
|
||||
class="btn btn-secondary">
|
||||
Voir le résultat
|
||||
</a>
|
||||
@ -446,5 +669,150 @@ $stats = $db->fetchOne($queryStats, [$user['id_utilisateur']]) ?? [
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php if (!empty($toutesEvals) && count($toutesEvals) > 1): ?>
|
||||
<script>
|
||||
// Données pour le graphique
|
||||
const toutesEvaluations = <?= json_encode($toutesEvals) ?>;
|
||||
|
||||
// Préparer les données
|
||||
const labels = toutesEvaluations.map((e, index) => {
|
||||
const date = new Date(e.date_fin);
|
||||
return `Eval ${index + 1}\n${date.getDate()}/${date.getMonth() + 1}`;
|
||||
});
|
||||
|
||||
const notes = toutesEvaluations.map(e => parseFloat(e.note));
|
||||
|
||||
// Calculer la moyenne mobile (sur 3 évaluations)
|
||||
const moyennesMobiles = notes.map((note, index, arr) => {
|
||||
if (index < 2) return null;
|
||||
const sum = arr[index - 2] + arr[index - 1] + arr[index];
|
||||
return sum / 3;
|
||||
});
|
||||
|
||||
// Créer le graphique
|
||||
const ctx = document.getElementById('progressionChart').getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Note (/20)',
|
||||
data: notes,
|
||||
borderColor: '#667eea',
|
||||
backgroundColor: 'rgba(102, 126, 234, 0.1)',
|
||||
borderWidth: 3,
|
||||
pointRadius: 6,
|
||||
pointBackgroundColor: '#667eea',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
pointHoverRadius: 8,
|
||||
tension: 0.3,
|
||||
fill: true
|
||||
},
|
||||
{
|
||||
label: 'Moyenne mobile (3 évals)',
|
||||
data: moyennesMobiles,
|
||||
borderColor: '#28a745',
|
||||
backgroundColor: 'rgba(40, 167, 69, 0.05)',
|
||||
borderWidth: 2,
|
||||
borderDash: [5, 5],
|
||||
pointRadius: 4,
|
||||
pointBackgroundColor: '#28a745',
|
||||
pointBorderColor: '#fff',
|
||||
pointBorderWidth: 2,
|
||||
tension: 0.3,
|
||||
fill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
labels: {
|
||||
usePointStyle: true,
|
||||
padding: 15,
|
||||
font: {
|
||||
size: 12,
|
||||
weight: '600'
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
padding: 12,
|
||||
titleFont: {
|
||||
size: 13,
|
||||
weight: 'bold'
|
||||
},
|
||||
bodyFont: {
|
||||
size: 12
|
||||
},
|
||||
callbacks: {
|
||||
title: function(context) {
|
||||
const index = context[0].dataIndex;
|
||||
return toutesEvaluations[index].titre;
|
||||
},
|
||||
label: function(context) {
|
||||
const index = context.dataIndex;
|
||||
const eval = toutesEvaluations[index];
|
||||
if (context.datasetIndex === 0) {
|
||||
return `Note: ${context.parsed.y.toFixed(2)}/20 (${eval.pourcentage}%)`;
|
||||
} else {
|
||||
return context.parsed.y ? `Moyenne mobile: ${context.parsed.y.toFixed(2)}/20` : '';
|
||||
}
|
||||
},
|
||||
afterLabel: function(context) {
|
||||
if (context.datasetIndex === 0) {
|
||||
const index = context.dataIndex;
|
||||
const eval = toutesEvaluations[index];
|
||||
return `Chapitre: ${eval.chapitre || 'Non spécifié'}`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
max: 20,
|
||||
ticks: {
|
||||
stepSize: 2,
|
||||
callback: function(value) {
|
||||
return value + '/20';
|
||||
},
|
||||
font: {
|
||||
size: 11
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.05)'
|
||||
}
|
||||
},
|
||||
x: {
|
||||
ticks: {
|
||||
font: {
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: 'index'
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user