Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Questionnaire de satisfaction - Circuit Training VO2max</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .rating-stars { | |
| display: flex; | |
| justify-content: center; | |
| margin: 10px 0; | |
| } | |
| .rating-stars input { | |
| display: none; | |
| } | |
| .rating-stars label { | |
| font-size: 2rem; | |
| color: #ddd; | |
| cursor: pointer; | |
| transition: color 0.2s; | |
| margin: 0 5px; | |
| } | |
| .rating-stars input:checked ~ label { | |
| color: #ddd; | |
| } | |
| .rating-stars label:hover, | |
| .rating-stars label:hover ~ label, | |
| .rating-stars input:checked + label, | |
| .rating-stars input:checked ~ label { | |
| color: #f59e0b; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 300px; | |
| margin-bottom: 2rem; | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background-color: #e5e7eb; | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background-color: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <header class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-blue-800 mb-2">Questionnaire de satisfaction</h1> | |
| <h2 class="text-2xl font-semibold text-blue-600">Circuit Training VO2max</h2> | |
| <div class="mt-4"> | |
| <div class="progress-bar w-full"> | |
| <div class="progress-fill" id="progress-fill" style="width: 0%"></div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-1" id="progress-text">0% complété</p> | |
| </div> | |
| </header> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="flex border-b"> | |
| <button class="tab-btn py-4 px-6 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="form">Formulaire</button> | |
| <button class="tab-btn py-4 px-6 font-medium text-gray-500" data-tab="results">Résultats</button> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Formulaire --> | |
| <div id="form" class="tab-content active"> | |
| <form id="satisfaction-form" class="space-y-8"> | |
| <!-- Section 1: Organisation --> | |
| <section class="border-b pb-6"> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-4 flex items-center"> | |
| <i class="fas fa-clipboard-list mr-2"></i> Organisation | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <p class="font-medium mb-2">Accueil des participants</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="accueil-5" name="accueil" value="5"><label for="accueil-5">★</label> | |
| <input type="radio" id="accueil-4" name="accueil" value="4"><label for="accueil-4">★</label> | |
| <input type="radio" id="accueil-3" name="accueil" value="3"><label for="accueil-3">★</label> | |
| <input type="radio" id="accueil-2" name="accueil" value="2"><label for="accueil-2">★</label> | |
| <input type="radio" id="accueil-1" name="accueil" value="1"><label for="accueil-1">★</label> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-2">Clarté des consignes</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="consignes-5" name="consignes" value="5"><label for="consignes-5">★</label> | |
| <input type="radio" id="consignes-4" name="consignes" value="4"><label for="consignes-4">★</label> | |
| <input type="radio" id="consignes-3" name="consignes" value="3"><label for="consignes-3">★</label> | |
| <input type="radio" id="consignes-2" name="consignes" value="2"><label for="consignes-2">★</label> | |
| <input type="radio" id="consignes-1" name="consignes" value="1"><label for="consignes-1">★</label> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-2">Gestion du temps de la séance</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="temps-5" name="temps" value="5"><label for="temps-5">★</label> | |
| <input type="radio" id="temps-4" name="temps" value="4"><label for="temps-4">★</label> | |
| <input type="radio" id="temps-3" name="temps" value="3"><label for="temps-3">★</label> | |
| <input type="radio" id="temps-2" name="temps" value="2"><label for="temps-2">★</label> | |
| <input type="radio" id="temps-1" name="temps" value="1"><label for="temps-1">★</label> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 2: Communication --> | |
| <section class="border-b pb-6"> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-4 flex items-center"> | |
| <i class="fas fa-comments mr-2"></i> Communication | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <p class="font-medium mb-2">Avez-vous reçu les informations nécessaires ?</p> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="infos" value="oui" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Oui</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="infos" value="non" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Non</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-2">Par quel moyen avez-vous entendu parler de l'événement ?</p> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="moyen[]" value="affiche" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Affiche</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="moyen[]" value="reseaux" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Réseaux sociaux</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="moyen[]" value="bouche" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Bouche-à-oreille</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="moyen[]" value="sms" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">SMS</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" name="moyen[]" value="autre" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Autre</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 3: Animation & Coaching --> | |
| <section class="border-b pb-6"> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-4 flex items-center"> | |
| <i class="fas fa-running mr-2"></i> Animation & Coaching | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <p class="font-medium mb-2">Échauffement adapté</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="echauffement-5" name="echauffement" value="5"><label for="echauffement-5">★</label> | |
| <input type="radio" id="echauffement-4" name="echauffement" value="4"><label for="echauffement-4">★</label> | |
| <input type="radio" id="echauffement-3" name="echauffement" value="3"><label for="echauffement-3">★</label> | |
| <input type="radio" id="echauffement-2" name="echauffement" value="2"><label for="echauffement-2">★</label> | |
| <input type="radio" id="echauffement-1" name="echauffement" value="1"><label for="echauffement-1">★</label> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-2">Consignes claires et motivantes</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="motivation-5" name="motivation" value="5"><label for="motivation-5">★</label> | |
| <input type="radio" id="motivation-4" name="motivation" value="4"><label for="motivation-4">★</label> | |
| <input type="radio" id="motivation-3" name="motivation" value="3"><label for="motivation-3">★</label> | |
| <input type="radio" id="motivation-2" name="motivation" value="2"><label for="motivation-2">★</label> | |
| <input type="radio" id="motivation-1" name="motivation" value="1"><label for="motivation-1">★</label> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-2">Coach disponible et encourageant</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="coach-5" name="coach" value="5"><label for="coach-5">★</label> | |
| <input type="radio" id="coach-4" name="coach" value="4"><label for="coach-4">★</label> | |
| <input type="radio" id="coach-3" name="coach" value="3"><label for="coach-3">★</label> | |
| <input type="radio" id="coach-2" name="coach" value="2"><label for="coach-2">★</label> | |
| <input type="radio" id="coach-1" name="coach" value="1"><label for="coach-1">★</label> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 4: Exercices --> | |
| <section class="border-b pb-6"> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-4 flex items-center"> | |
| <i class="fas fa-dumbbell mr-2"></i> Exercices | |
| </h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <p class="font-medium mb-2">Diversité des exercices</p> | |
| <div class="rating-stars"> | |
| <input type="radio" id="diversite-5" name="diversite" value="5"><label for="diversite-5">★</label> | |
| <input type="radio" id="diversite-4" name="diversite" value="4"><label for="diversite-4">★</label> | |
| <input type="radio" id="diversite-3" name="diversite" value="3"><label for="diversite-3">★</label> | |
| <input type="radio" id="diversite-2" name="diversite" value="2"><label for="diversite-2">★</label> | |
| <input type="radio" id="diversite-1" name="diversite" value="1"><label for="diversite-1">★</label> | |
| </div> | |
| </div> | |
| <div> | |
| <p class="font-medium mb-2">Niveau de difficulté</p> | |
| <div class="flex space-x-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="difficulte" value="trop_facile" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Trop facile</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="difficulte" value="accessible" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Accessible</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="difficulte" value="trop_difficile" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Trop difficile</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 5: Recommandation --> | |
| <section class="border-b pb-6"> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-4 flex items-center"> | |
| <i class="fas fa-thumbs-up mr-2"></i> Recommandation | |
| </h3> | |
| <div> | |
| <p class="font-medium mb-2">Recommanderiez-vous cet événement ?</p> | |
| <div class="space-y-2"> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="recommandation" value="oui_sans_hesiter" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Oui, sans hésiter</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="recommandation" value="oui_avec_ameliorations" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Oui, mais avec quelques améliorations</span> | |
| </label> | |
| <label class="inline-flex items-center"> | |
| <input type="radio" name="recommandation" value="non" class="h-4 w-4 text-blue-600"> | |
| <span class="ml-2">Non</span> | |
| </label> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Section 6: Avis général --> | |
| <section> | |
| <h3 class="text-xl font-semibold text-blue-700 mb-4 flex items-center"> | |
| <i class="fas fa-edit mr-2"></i> Avis général | |
| </h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label for="avis" class="block font-medium mb-2">Votre avis général :</label> | |
| <textarea id="avis" name="avis" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <div> | |
| <label for="suggestions" class="block font-medium mb-2">Suggestions d'amélioration :</label> | |
| <textarea id="suggestions" name="suggestions" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="flex justify-between pt-6"> | |
| <button type="button" id="simulate-btn" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition"> | |
| Simuler des réponses | |
| </button> | |
| <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| Soumettre le questionnaire | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Résultats --> | |
| <div id="results" class="tab-content"> | |
| <div class="text-center mb-8"> | |
| <h3 class="text-2xl font-bold text-blue-700 mb-2">Résultats du questionnaire</h3> | |
| <p class="text-gray-600">Analyse des retours des participants</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-semibold text-lg mb-4 text-blue-700">Moyens de communication</h4> | |
| <div class="chart-container"> | |
| <canvas id="communicationChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-semibold text-lg mb-4 text-blue-700">Niveau de recommandation</h4> | |
| <div class="chart-container"> | |
| <canvas id="recommandationChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="font-semibold text-lg mb-4 text-blue-700">Notes moyennes par catégorie</h4> | |
| <div class="chart-container"> | |
| <canvas id="radarChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <h4 class="font-semibold text-lg mb-4 text-blue-700">Détail des notes</h4> | |
| <div class="chart-container"> | |
| <canvas id="barChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow mb-8"> | |
| <h4 class="font-semibold text-lg mb-4 text-blue-700">Niveau de difficulté perçu</h4> | |
| <div class="chart-container"> | |
| <canvas id="difficulteChart"></canvas> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow"> | |
| <h4 class="font-semibold text-lg mb-4 text-blue-700">Avis des participants</h4> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gray-50 rounded"> | |
| <p class="font-medium">"Très bon entraînement, le coach était super motivant!"</p> | |
| <p class="text-sm text-gray-500 mt-1">- Participant 1</p> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded"> | |
| <p class="font-medium">"Les exercices étaient variés mais un peu trop difficiles pour moi."</p> | |
| <p class="text-sm text-gray-500 mt-1">- Participant 3</p> | |
| </div> | |
| <div class="p-4 bg-gray-50 rounded"> | |
| <p class="font-medium">"J'ai adoré l'ambiance et l'énergie du groupe. À refaire!"</p> | |
| <p class="text-sm text-gray-500 mt-1">- Participant 5</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Gestion des onglets | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('text-blue-600', 'border-blue-600')); | |
| document.querySelectorAll('.tab-btn').forEach(b => b.classList.add('text-gray-500')); | |
| btn.classList.remove('text-gray-500'); | |
| btn.classList.add('text-blue-600', 'border-blue-600'); | |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); | |
| document.getElementById(btn.dataset.tab).classList.add('active'); | |
| }); | |
| }); | |
| // Simulation de réponses | |
| document.getElementById('simulate-btn').addEventListener('click', () => { | |
| // Organisation | |
| document.querySelector('input[name="accueil"][value="4"]').checked = true; | |
| document.querySelector('input[name="consignes"][value="5"]').checked = true; | |
| document.querySelector('input[name="temps"][value="3"]').checked = true; | |
| // Communication | |
| document.querySelector('input[name="infos"][value="oui"]').checked = true; | |
| document.querySelector('input[name="moyen[]"][value="reseaux"]').checked = true; | |
| document.querySelector('input[name="moyen[]"][value="bouche"]').checked = true; | |
| // Animation & Coaching | |
| document.querySelector('input[name="echauffement"][value="4"]').checked = true; | |
| document.querySelector('input[name="motivation"][value="5"]').checked = true; | |
| document.querySelector('input[name="coach"][value="5"]').checked = true; | |
| // Exercices | |
| document.querySelector('input[name="diversite"][value="4"]').checked = true; | |
| document.querySelector('input[name="difficulte"][value="accessible"]').checked = true; | |
| // Recommandation | |
| document.querySelector('input[name="recommandation"][value="oui_sans_hesiter"]').checked = true; | |
| // Avis général | |
| document.getElementById('avis').value = "Super séance, très motivante et bien organisée. Le coach était excellent!"; | |
| document.getElementById('suggestions').value = "Peut-être prévoir plus d'exercices adaptés aux débutants."; | |
| updateProgress(); | |
| }); | |
| // Mise à jour de la barre de progression | |
| function updateProgress() { | |
| const form = document.getElementById('satisfaction-form'); | |
| const inputs = form.querySelectorAll('input[type="radio"]:checked, input[type="checkbox"]:checked, textarea'); | |
| const totalInputs = form.querySelectorAll('input[type="radio"], input[type="checkbox"], textarea').length; | |
| const progress = (inputs.length / totalInputs) * 100; | |
| document.getElementById('progress-fill').style.width = `${progress}%`; | |
| document.getElementById('progress-text').textContent = `${Math.round(progress)}% complété`; | |
| } | |
| document.querySelectorAll('input, textarea').forEach(element => { | |
| element.addEventListener('change', updateProgress); | |
| }); | |
| // Soumission du formulaire | |
| document.getElementById('satisfaction-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Stocker les réponses (simulation) | |
| const responses = [ | |
| { | |
| accueil: 4, consignes: 5, temps: 3, | |
| infos: "oui", moyen: ["reseaux", "bouche"], | |
| echauffement: 4, motivation: 5, coach: 5, | |
| diversite: 4, difficulte: "accessible", | |
| recommandation: "oui_sans_hesiter", | |
| avis: "Super séance, très motivante et bien organisée. Le coach était excellent!", | |
| suggestions: "Peut-être prévoir plus d'exercices adaptés aux débutants." | |
| }, | |
| { | |
| accueil: 3, consignes: 4, temps: 4, | |
| infos: "oui", moyen: ["affiche"], | |
| echauffement: 3, motivation: 4, coach: 4, | |
| diversite: 3, difficulte: "accessible", | |
| recommandation: "oui_avec_ameliorations", | |
| avis: "Bonne séance dans l'ensemble, mais les consignes pourraient être plus claires.", | |
| suggestions: "Plus d'explications sur les mouvements." | |
| }, | |
| { | |
| accueil: 5, consignes: 5, temps: 5, | |
| infos: "oui", moyen: ["sms"], | |
| echauffement: 5, motivation: 5, coach: 5, | |
| diversite: 5, difficulte: "accessible", | |
| recommandation: "oui_sans_hesiter", | |
| avis: "Parfait! Je recommande à 100%. L'énergie était incroyable.", | |
| suggestions: "Rien à signaler, tout était parfait." | |
| }, | |
| { | |
| accueil: 2, consignes: 3, temps: 2, | |
| infos: "non", moyen: ["autre"], | |
| echauffement: 3, motivation: 2, coach: 3, | |
| diversite: 2, difficulte: "trop_difficile", | |
| recommandation: "non", | |
| avis: "Trop difficile pour moi, j'ai eu du mal à suivre.", | |
| suggestions: "Proposer différents niveaux de difficulté." | |
| }, | |
| { | |
| accueil: 4, consignes: 4, temps: 4, | |
| infos: "oui", moyen: ["reseaux"], | |
| echauffement: 4, motivation: 4, coach: 4, | |
| diversite: 4, difficulte: "accessible", | |
| recommandation: "oui_avec_ameliorations", | |
| avis: "Très bonne séance, mais un peu courte à mon goût.", | |
| suggestions: "Allonger la durée de la séance." | |
| }, | |
| { | |
| accueil: 5, consignes: 4, temps: 5, | |
| infos: "oui", moyen: ["bouche"], | |
| echauffement: 5, motivation: 4, coach: 5, | |
| diversite: 5, difficulte: "trop_facile", | |
| recommandation: "oui_sans_hesiter", | |
| avis: "Excellent! Mais j'aurais aimé un peu plus de challenge.", | |
| suggestions: "Proposer des options plus difficiles pour les participants avancés." | |
| } | |
| ]; | |
| // Afficher les résultats | |
| displayResults(responses); | |
| document.querySelector('[data-tab="results"]').click(); | |
| }); | |
| // Affichage des résultats | |
| function displayResults(responses) { | |
| // Calcul des statistiques | |
| const stats = { | |
| communication: { | |
| affiche: 0, reseaux: 0, bouche: 0, sms: 0, autre: 0 | |
| }, | |
| recommandation: { | |
| oui_sans_hesiter: 0, oui_avec_ameliorations: 0, non: 0 | |
| }, | |
| difficulte: { | |
| trop_facile: 0, accessible: 0, trop_difficile: 0 | |
| }, | |
| moyennes: { | |
| accueil: 0, consignes: 0, temps: 0, | |
| echauffement: 0, motivation: 0, coach: 0, | |
| diversite: 0 | |
| } | |
| }; | |
| responses.forEach(response => { | |
| // Communication | |
| if (response.moyen) { | |
| response.moyen.forEach(m => stats.communication[m]++); | |
| } | |
| // Recommandation | |
| stats.recommandation[response.recommandation]++; | |
| // Difficulté | |
| stats.difficulte[response.difficulte]++; | |
| // Calcul des moyennes | |
| stats.moyennes.accueil += response.accueil; | |
| stats.moyennes.consignes += response.consignes; | |
| stats.moyennes.temps += response.temps; | |
| stats.moyennes.echauffement += response.echauffement; | |
| stats.moyennes.motivation += response.motivation; | |
| stats.moyennes.coach += response.coach; | |
| stats.moyennes.diversite += response.diversite; | |
| }); | |
| // Calcul des moyennes | |
| for (const key in stats.moyennes) { | |
| stats.moyennes[key] = (stats.moyennes[key] / responses.length).toFixed(1); | |
| } | |
| // Graphique des moyens de communication | |
| const communicationCtx = document.getElementById('communicationChart').getContext('2d'); | |
| new Chart(communicationCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Affiche', 'Réseaux sociaux', 'Bouche-à-oreille', 'SMS', 'Autre'], | |
| datasets: [{ | |
| data: [ | |
| stats.communication.affiche, | |
| stats.communication.reseaux, | |
| stats.communication.bouche, | |
| stats.communication.sms, | |
| stats.communication.autre | |
| ], | |
| backgroundColor: [ | |
| '#3b82f6', | |
| '#10b981', | |
| '#f59e0b', | |
| '#ef4444', | |
| '#8b5cf6' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| // Graphique de recommandation | |
| const recommandationCtx = document.getElementById('recommandationChart').getContext('2d'); | |
| new Chart(recommandationCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Oui, sans hésiter', 'Oui, avec améliorations', 'Non'], | |
| datasets: [{ | |
| data: [ | |
| stats.recommandation.oui_sans_hesiter, | |
| stats.recommandation.oui_avec_ameliorations, | |
| stats.recommandation.non | |
| ], | |
| backgroundColor: [ | |
| '#10b981', | |
| '#f59e0b', | |
| '#ef4444' | |
| ] | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom' | |
| } | |
| } | |
| } | |
| }); | |
| // Graphique radar des moyennes | |
| const radarCtx = document.getElementById('radarChart').getContext('2d'); | |
| new Chart(radarCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Accueil', 'Consignes', 'Gestion du temps', 'Échauffement', 'Motivation', 'Coach', 'Diversité'], | |
| datasets: [{ | |
| label: 'Notes moyennes', | |
| data: [ | |
| stats.moyennes.accueil, | |
| stats.moyennes.consignes, | |
| stats.moyennes.temps, | |
| stats.moyennes.echauffement, | |
| stats.moyennes.motivation, | |
| stats.moyennes.coach, | |
| stats.moyennes.diversite | |
| ], | |
| backgroundColor: 'rgba(59, 130, 246, 0.2)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 2, | |
| pointBackgroundColor: 'rgba(59, 130, 246, 1)' | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 5 | |
| } | |
| } | |
| } | |
| }); | |
| // Graphique en barres des notes | |
| const barCtx = document.getElementById('barChart').getContext('2d'); | |
| new Chart(barCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Accueil', 'Consignes', 'Temps', 'Échauffement', 'Motivation', 'Coach', 'Diversité'], | |
| datasets: [{ | |
| label: 'Note moyenne', | |
| data: [ | |
| stats.moyennes.accueil, | |
| stats.moyennes.consignes, | |
| stats.moyennes.temps, | |
| stats.moyennes.echauffement, | |
| stats.moyennes.motivation, | |
| stats.moyennes.coach, | |
| stats.moyennes.diversite | |
| ], | |
| backgroundColor: 'rgba(59, 130, 246, 0.7)', | |
| borderColor: 'rgba(59, 130, 246, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 5 | |
| } | |
| } | |
| } | |
| }); | |
| // Graphique de difficulté | |
| const difficulteCtx = document.getElementById('difficulteChart').getContext('2d'); | |
| new Chart(difficulteCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Trop facile', 'Accessible', 'Trop difficile'], | |
| datasets: [{ | |
| label: 'Nombre de participants', | |
| data: [ | |
| stats.difficulte.trop_facile, | |
| stats.difficulte.accessible, | |
| stats.difficulte.trop_difficile | |
| ], | |
| backgroundColor: [ | |
| 'rgba(16, 185, 129, 0.7)', | |
| 'rgba(59, 130, 246, 0.7)', | |
| 'rgba(239, 68, 68, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(16, 185, 129, 1)', | |
| 'rgba(59, 130, 246, 1)', | |
| 'rgba(239, 68, 68, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| stepSize: 1 | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ys555/vo2max-questionnaire" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |