From 69b5d3f2f9b8c68e838514f6dff30b27310ef099 Mon Sep 17 00:00:00 2001
From: JubaAzul <118773284+JubaAzul@users.noreply.github.com>
Date: Tue, 14 Jan 2025 16:21:32 -0500
Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20avec=20interaction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/GIFTCheatSheet/GiftCheatSheet.tsx |  5 ++---
 .../src/pages/Teacher/EditorQuiz/EditorQuiz.tsx  | 16 +++++++++++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx b/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
index 671ae9d..6165fd0 100644
--- a/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
+++ b/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
@@ -153,7 +153,7 @@ const GiftCheatSheet: React.FC = () => {
                 </pre>
             </div>
 
-            <div className="question-type">
+            <div className="question-type" id="images-section">
                 <h4> 9. Images </h4>
                 <p>Pour insérer une image dans une question ou dans une réponse, vous devez utiliser la syntaxe suivante:</p>
                 <pre>
@@ -179,8 +179,7 @@ const GiftCheatSheet: React.FC = () => {
                     Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus
                     supportée.
                 </p>
-            </div>
-
+                </div>
             <div className="question-type">
                 <h4> 10. Informations supplémentaires </h4>
                 <p>
diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
index 7a2475f..796d5fe 100644
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@@ -41,6 +41,14 @@ const QuizForm: React.FC = () => {
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
 
+    const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
+        event.preventDefault();
+        const section = document.getElementById('images-section');
+        if (section) {
+            section.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
     useEffect(() => {
         const fetchData = async () => {
             const userFolders = await ApiService.getUserFolders();
@@ -258,11 +266,13 @@ const QuizForm: React.FC = () => {
                         </div>
 
                         <h4>Mes images :</h4>
-
                         <div>
                                 <div>
-                                <div style={{ display: "inline" }}>(Voir section ci-dessous : </div>
-                                <h4 style={{ display: "inline" }}> 9. Images </h4>
+                                <div style={{ display: "inline" }}>(Voir section </div>
+                                    <a href="#images-section"style={{ textDecoration: "none" }} onClick={scrollToImagesSection}>
+                                        <u><em><h4 style={{ display: "inline" }}> 9. Images </h4></em></u>
+                                    </a>
+                                <div style={{ display: "inline" }}> ci-dessous</div>
                                 <div style={{ display: "inline" }}>)</div>
                                 <br />
                                 <em> - Cliquez sur un lien pour le copier</em>