From d2dfe7cdd53cf998ac395f50a0f86375986c722e Mon Sep 17 00:00:00 2001
From: JubaAzul <118773284+JubaAzul@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:19:33 -0500
Subject: [PATCH] Add button to scroll to the top of the editQuiz page

---
 .../pages/Teacher/EditorQuiz/EditorQuiz.tsx   | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
index 796d5fe..f777969 100644
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@@ -40,6 +40,7 @@ const QuizForm: React.FC = () => {
     };
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
+    const [showScrollButton, setShowScrollButton] = useState(false);
 
     const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
         event.preventDefault();
@@ -49,6 +50,26 @@ const QuizForm: React.FC = () => {
         }
     };
 
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setShowScrollButton(true);
+            } else {
+                setShowScrollButton(false);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+
     useEffect(() => {
         const fetchData = async () => {
             const userFolders = await ApiService.getUserFolders();
@@ -295,6 +316,11 @@ const QuizForm: React.FC = () => {
 
                     <GiftCheatSheet />
 
+                {showScrollButton && (
+                <button onClick={scrollToTop} style={scrollToTopButtonStyle}>
+                    ↑
+                </button>
+            )}
                 </div>
 
                 <div className='preview'>
@@ -312,4 +338,19 @@ const QuizForm: React.FC = () => {
     );
 };
 
+// CSS for the Scroll-to-Top Button
+const scrollToTopButtonStyle: React.CSSProperties = {
+    position: 'fixed',
+    bottom: '40px',
+    right: '50px',
+    padding: '10px 20px',
+    fontSize: '16px',
+    borderRadius: '5px',
+    backgroundColor: '#5271ff',
+    border: 'none',
+    color: 'white',
+    cursor: 'pointer',
+    zIndex: 1000,
+};
+
 export default QuizForm;