Exo FDS

Correction style et affichages de réponses dans le tableau

exercices/Exo_FDS.html

@@ -5,129 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TD FDS, FT et Étiquettes</title>
     <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="../header-style.css"/>
     <style>
-        :root {
-            --amber: #BA7517;
-            --amber-mid: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --amber: #BA7517;
-            --amber-light: #FAEEDA;
-            --amber-dark: #633806;
-            --coral: #993C1D;
-            --coral-mid: #D85A30;
-            --coral-light: #FAECE7;
-            --purple: #BA7517;
-            --purple-light: #FAEEDA;
-            --purple-dark: #633806;
-            --blue: #BA7517;
-            --blue-light: #FAEEDA;
-            --bg: #F7F6F2;
-            --white: #FFFFFF;
-            --text: #1a1a18;
-            --text-muted: #6b6a65;
-            --border: rgba(0,0,0,0.1);
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html, body {
-            height: 100%;
-        }
-
         body {
-            font-family: 'DM Sans', sans-serif;
-            background: var(--bg);
-            color: var(--text);
-            line-height: 1.6;
             padding-top: 70px;
-            overflow-x: hidden;
-        }
-
-        /* HEADER NAVIGATION */
-        .nav-header {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 70px;
-            background: var(--amber-light);
-            border-bottom: 2px solid var(--amber);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 40px;
-            z-index: 1000;
-            backdrop-filter: blur(10px);
-            background: rgba(250, 238, 218, 0.98);
-        }
-
-        .header-logo {
-            font-family: 'Syne', sans-serif;
-            font-size: 16px;
-            font-weight: 700;
-            letter-spacing: -0.5px;
-            background: linear-gradient(135deg, var(--amber), var(--coral-mid));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            text-decoration: none;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .header-nav {
-            display: flex;
-            gap: 30px;
-            align-items: center;
-        }
-
-        .header-nav a {
-            font-family: 'Syne', sans-serif;
-            font-size: 12px;
-            font-weight: 600;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            color: var(--text-muted);
-            text-decoration: none;
-            transition: color 0.3s ease;
-            position: relative;
-        }
-
-        .header-nav a:hover {
-            color: var(--amber);
-        }
-
-        .header-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background: var(--amber);
-            transition: width 0.3s ease;
-        }
-
-        .header-nav a:hover::after {
-            width: 100%;
         }
 
         .container {
             max-width: 900px;
             margin: 0 auto;
             background: var(--amber-light);
-            border-radius: 0;
-            box-shadow: none;
-            overflow: visible;
         }
 
-        header {
+        .page-header {
             background: linear-gradient(135deg, var(--amber-light) 0%, rgba(24, 95, 165, 0.05) 100%);
             color: var(--text);
             padding: 50px 40px;
@@ -135,7 +25,7 @@
             border-bottom: 3px solid var(--amber);
         }
 
-        header h1 {
+        .page-header h1 {
             font-family: 'Syne', sans-serif;
             font-size: 2.2em;
             margin-bottom: 10px;
@@ -144,7 +34,7 @@
             color: var(--text);
         }
 
-        header p {
+        .page-header p {
             font-size: 1em;
             opacity: 0.8;
             font-weight: 400;
@@ -161,14 +51,8 @@
         }
 
         @keyframes fadeIn {
-            from {
+            from { opacity: 0; transform: translateY(10px); }
-                opacity: 0;
+            to { opacity: 1; transform: translateY(0); }
-                transform: translateY(10px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
         }
 
         h2 {
@@ -402,47 +286,7 @@
             border-top: 1px solid var(--border);
         }
 
-        .progress {
-            height: 3px;
-            background: var(--border);
-            margin: 0;
-            border-radius: 0;
-            overflow: hidden;
-            position: fixed;
-            top: 70px;
-            left: 0;
-            right: 0;
-            z-index: 999;
-        }
-
-        .progress-bar {
-            height: 100%;
-            background: var(--coral-mid);
-            width: 0%;
-            transition: width 0.3s ease;
-        }
-
         @media (max-width: 768px) {
-            .nav-header {
-                padding: 0 20px;
-            }
-
-            .header-logo {
-                font-size: 14px;
-            }
-
-            .header-nav {
-                gap: 15px;
-            }
-
-            .header-nav a {
-                font-size: 10px;
-            }
-
-            header h1 {
-                font-size: 1.8em;
-            }
-
             .content {
                 padding: 25px;
             }
@@ -464,28 +308,26 @@
     </style>
 </head>
 <body>
-    <!-- HEADER NAVIGATION -->
     <header>
         <div class="logo">NextGN Formation</div>
-            <a href="../../index.html">Accueil</a>
         <nav>
-            <a href="../../index.html#formations">Exercices</a>
+            <a href="../index.html">Accueil</a>
-            <a href="../../index.html#documentation">Documentation</a>
+            <a href="../index.html#formations">Exercices</a>
-            <a href="../../index.html#rapports">Rapports</a>
+            <a href="../index.html#documentation">Documentation</a>
-            <a href="../../index.html#about">À propos</a>
+            <a href="../index.html#rapports">Rapports</a>
-            <a href="../../index.html#contact">Contact</a>
+            <a href="../index.html#about">À propos</a>
+            <a href="../index.html#contact">Contact</a>
         </nav>
     </header>
 
-<body>
+    <div class="progress-bar">
+        <div class="progress-fill" id="progressBar"></div>
+    </div>
+
     <div class="container">
-        <header>
+        <div class="page-header">
             <h1>📋 TD — ANALYSE FDS, FT ET ÉTIQUETTES</h1>
             <p>Maîtriser les documents essentiels des produits biocides</p>
-        </header>
-
-        <div class="progress">
-            <div class="progress-bar" id="progressBar"></div>
         </div>
 
         <div class="content">
@@ -864,7 +706,6 @@
             { id: 16, text: "Où trouver le mode d'emploi du produit ?", answer: "absent" }
         ];
 
-        // Mélanger aléatoirement les questions
         function shuffleArray(array) {
             const newArray = [...array];
             for (let i = newArray.length - 1; i > 0; i--) {
@@ -874,7 +715,6 @@
             return newArray;
         }
 
-        // Générer les questions FDS mélangées
         function generateFDSQuestions() {
             const shuffled = shuffleArray(fdsQuestions);
             const container = document.getElementById('fds-questions');
@@ -915,7 +755,6 @@
             });
         }
 
-        // Answers mapping
         const answers = {
             ft: {
                 1: ['Description'],
@@ -941,42 +780,45 @@
         function verifyFDS() {
             let correct = 0;
             let total = 16;
-            let details = [];
+            let detailItems = [];
 
             fdsQuestions.forEach((question) => {
                 const select = document.getElementById('fds' + question.id);
-                const qNum = select.getAttribute('data-qnum');
+                const qNum = parseInt(select.getAttribute('data-qnum'));
                 const userAnswer = select.value;
                 const expectedAnswers = question.answer.split(',');
 
                 if (userAnswer === '') {
-                    details.push(`Q${qNum}: ❌ Pas de réponse`);
+                    detailItems.push({ qNum, text: `Q${qNum} : ❌ Pas de réponse` });
                 } else if (expectedAnswers.includes(userAnswer)) {
                     correct++;
-                    details.push(`Q${qNum}: ✓ Correct`);
+                    detailItems.push({ qNum, text: `Q${qNum} : ✓ Correct` });
                 } else {
                     const expected = expectedAnswers.length > 1 ?
                         'Rubriques ' + expectedAnswers.join(' et ') :
                         (expectedAnswers[0] === 'absent' ? 'Absent' : 'Rubrique ' + expectedAnswers[0]);
-                    details.push(`Q${qNum}: ❌ Incorrect (réponse: ${expected})`);
+                    detailItems.push({ qNum, text: `Q${qNum} : ❌ Incorrect (réponse : ${expected})` });
                 }
             });
 
+            detailItems.sort((a, b) => a.qNum - b.qNum);
+            const details = detailItems.map(item => item.text);
+
             const resultDiv = document.getElementById('fds-result');
             const percentage = Math.round((correct / total) * 100);
 
             let message = '';
             if (percentage === 100) {
-                resultDiv.className = 'result-message success';
+                resultDiv.className = 'result-message success show';
                 message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else if (percentage >= 80) {
-                resultDiv.className = 'result-message success';
+                resultDiv.className = 'result-message success show';
                 message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else if (percentage >= 60) {
-                resultDiv.className = 'result-message error';
+                resultDiv.className = 'result-message error show';
                 message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else {
-                resultDiv.className = 'result-message error';
+                resultDiv.className = 'result-message error show';
                 message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             }
 
@@ -994,12 +836,12 @@
                 const expectedAnswers = answers.ft[i];
 
                 if (userAnswer === '') {
-                    details.push(`Q${i}: ❌ Pas de réponse`);
+                    details.push(`Q${i} : ❌ Pas de réponse`);
                 } else if (expectedAnswers.includes(userAnswer)) {
                     correct++;
-                    details.push(`Q${i}: ✓ Correct`);
+                    details.push(`Q${i} : ✓ Correct`);
                 } else {
-                    details.push(`Q${i}: ❌ Incorrect (réponse: ${expectedAnswers[0]})`);
+                    details.push(`Q${i} : ❌ Incorrect (réponse : ${expectedAnswers[0]})`);
                 }
             }
 
@@ -1008,16 +850,16 @@
 
             let message = '';
             if (percentage === 100) {
-                resultDiv.className = 'result-message success';
+                resultDiv.className = 'result-message success show';
                 message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else if (percentage >= 80) {
-                resultDiv.className = 'result-message success';
+                resultDiv.className = 'result-message success show';
                 message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else if (percentage >= 60) {
-                resultDiv.className = 'result-message error';
+                resultDiv.className = 'result-message error show';
                 message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else {
-                resultDiv.className = 'result-message error';
+                resultDiv.className = 'result-message error show';
                 message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             }
 
@@ -1035,12 +877,12 @@
                 const expectedAnswers = answers.etiquette[i];
 
                 if (userAnswer === '') {
-                    details.push(`Q${i}: ❌ Pas de réponse`);
+                    details.push(`Q${i} : ❌ Pas de réponse`);
                 } else if (expectedAnswers.includes(userAnswer)) {
                     correct++;
-                    details.push(`Q${i}: ✓ Correct`);
+                    details.push(`Q${i} : ✓ Correct`);
                 } else {
-                    details.push(`Q${i}: ❌ Incorrect (réponse: ${expectedAnswers[0]})`);
+                    details.push(`Q${i} : ❌ Incorrect (réponse : ${expectedAnswers[0]})`);
                 }
             }
 
@@ -1049,16 +891,16 @@
 
             let message = '';
             if (percentage === 100) {
-                resultDiv.className = 'result-message success';
+                resultDiv.className = 'result-message success show';
                 message = `<strong>🎉 Excellent !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else if (percentage >= 80) {
-                resultDiv.className = 'result-message success';
+                resultDiv.className = 'result-message success show';
                 message = `<strong>✓ Très bien !</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else if (percentage >= 60) {
-                resultDiv.className = 'result-message error';
+                resultDiv.className = 'result-message error show';
                 message = `<strong>⚠️ À revoir</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             } else {
-                resultDiv.className = 'result-message error';
+                resultDiv.className = 'result-message error show';
                 message = `<strong>❌ Insuffisant</strong> Vous avez ${correct}/${total} bonnes réponses (${percentage}%)`;
             }
 
@@ -1066,16 +908,8 @@
         }
 
         function switchTab(tabName) {
-            const contents = document.querySelectorAll('.tab-content');
+            document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-            contents.forEach(content => {
+            document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
-                content.classList.remove('active');
-            });
-
-            const buttons = document.querySelectorAll('.tab-button');
-            buttons.forEach(button => {
-                button.classList.remove('active');
-            });
-
             document.getElementById(tabName).classList.add('active');
             event.target.classList.add('active');
         }
@@ -1089,13 +923,10 @@
 
         document.addEventListener('DOMContentLoaded', () => {
             generateFDSQuestions();
-            const sections = document.querySelectorAll('.section');
+            document.querySelectorAll('.section').forEach((section, index) => {
-            sections.forEach((section, index) => {
                 section.style.animationDelay = (index * 0.1) + 's';
             });
         });
     </script>
 </body>
 </html>
-
-