notytex/templates/assessment_results.html

{% extends "base.html" %}

{% block title %}Résultats - {{ assessment.title }} - Gestion Scolaire{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="flex justify-between items-center">
        <div>
            <a href="{{ url_for('assessments.detail', id=assessment.id) }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium mb-2 inline-block">
                ← Retour à l'évaluation
            </a>
            <h1 class="text-2xl font-bold text-gray-900">Résultats - {{ assessment.title }}</h1>
            <p class="text-gray-600">{{ assessment.class_group.name }} - {{ assessment.date.strftime('%d/%m/%Y') }} - Trimestre {{ assessment.trimester }}</p>
        </div>
    </div>
    
    <!-- Statistiques générales -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Statistiques de l'évaluation</h2>
        </div>
        <div class="px-6 py-4">
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                <div class="text-center">
                    <div class="text-2xl font-bold text-blue-600">{{ statistics.count }}</div>
                    <div class="text-sm text-gray-500">Élèves</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-green-600">{{ statistics.mean }}</div>
                    <div class="text-sm text-gray-500">Moyenne</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-purple-600">{{ statistics.median }}</div>
                    <div class="text-sm text-gray-500">Médiane</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-red-600">{{ statistics.min }}</div>
                    <div class="text-sm text-gray-500">Minimum</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-green-600">{{ statistics.max }}</div>
                    <div class="text-sm text-gray-500">Maximum</div>
                </div>
                <div class="text-center">
                    <div class="text-2xl font-bold text-orange-600">{{ statistics.std_dev }}</div>
                    <div class="text-sm text-gray-500">Écart-type</div>
                </div>
            </div>
            <div class="mt-4 text-sm text-gray-600 text-center">
                Total des points de l'évaluation : {{ "%.1f"|format(total_max_points) }}
            </div>
        </div>
    </div>
    
    <!-- Histogramme des notes -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Distribution des notes</h2>
        </div>
        <div class="px-6 py-4">
            <canvas id="scoresChart" width="400" height="200"></canvas>
        </div>
    </div>
    
    <!-- Tableau des résultats -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-6 py-4 border-b border-gray-200">
            <h2 class="text-lg font-medium text-gray-900">Résultats par élève</h2>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Élève
                        </th>
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Note totale
                        </th>
                        {% for exercise in assessment.exercises|sort(attribute='order') %}
                        <th class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                            {{ exercise.title }}
                        </th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for student_data in students_scores %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                                {{ student_data.student.last_name }} {{ student_data.student.first_name }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <div class="text-sm font-bold text-gray-900">
                                {{ "%.1f"|format(student_data.total_score) }} / {{ "%.1f"|format(student_data.total_max_points) }}
                            </div>
                        </td>
                        {% for exercise in assessment.exercises|sort(attribute='order') %}
                        <td class="px-6 py-4 whitespace-nowrap text-center">
                            <div class="text-sm text-gray-900">
                                {% if exercise.id in student_data.exercises %}
                                    {{ "%.1f"|format(student_data.exercises[exercise.id].score) }} / {{ "%.1f"|format(student_data.exercises[exercise.id].max_points) }}
                                {% else %}
                                    -
                                {% endif %}
                            </div>
                        </td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('scoresChart').getContext('2d');
    const scores = {{ scores_json | tojson }};
    
    // Créer les intervalles pour l'histogramme
    const totalMaxPoints = {{ total_max_points }};
    const minScore = 0;
    const maxScore = totalMaxPoints;
    const binWidth = 1; // Groupes de 1 point
    const numBins = Math.ceil(maxScore - minScore); // Nombre de bins basé sur le total des points
    
    const bins = [];
    const labels = [];
    
    for (let i = 0; i < numBins; i++) {
        const binStart = minScore + i * binWidth;
        const binEnd = minScore + (i + 1) * binWidth;
        bins.push(0);
        labels.push(`${binStart.toFixed(0)} - ${binEnd.toFixed(0)}`);
    }
    
    // Compter les scores dans chaque intervalle
    scores.forEach(score => {
        let binIndex = Math.floor((score - minScore) / binWidth);
        if (binIndex >= numBins) binIndex = numBins - 1; // Pour le score maximum
        if (binIndex >= 0) bins[binIndex]++;
    });
    
    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Nombre d\'élèves',
                data: bins,
                backgroundColor: 'rgba(59, 130, 246, 0.5)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Distribution des notes'
                },
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    },
                    title: {
                        display: true,
                        text: 'Nombre d\'élèves'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Intervalles de notes'
                    }
                }
            }
        }
    });
});
</script>
{% endblock %}