From bc7c8eb4b56877d12ca9c1848eb676d200bc993c Mon Sep 17 00:00:00 2001
From: Ajinkya Pande <ajinkya.pande@tekditechnologies.com>
Date: Tue, 29 Oct 2024 15:08:26 +0530
Subject: [PATCH 1/3] Issueid #0000 iframe height for fill in the blanks

---
 src/views/Practice/Practice.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/views/Practice/Practice.jsx b/src/views/Practice/Practice.jsx
index 5fd1536..a2bfe85 100644
--- a/src/views/Practice/Practice.jsx
+++ b/src/views/Practice/Practice.jsx
@@ -716,11 +716,11 @@ const Practice = () => {
           questions[currentQuestion]?.contentSourceData || [];
         const stringLengths = contentSourceData.map((item) => item.text.length);
         const length =
-          (questions[currentQuestion]?.mechanics_data &&
+          questions[currentQuestion]?.mechanics_data &&
+          (questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
+            "mechanic_2" ||
             questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
-              "mechanic_2") ||
-          questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
-            "mechanic_1"
+              "mechanic_1")
             ? 500
             : stringLengths[0];
         window.parent.postMessage({ type: "stringLengths", length }, "*");

From 9383e69ce5b89c80387e50e88d1922554672606e Mon Sep 17 00:00:00 2001
From: Ajinkya Pande <ajinkya.pande@tekditechnologies.com>
Date: Mon, 4 Nov 2024 14:15:05 +0530
Subject: [PATCH 2/3] Issueid #0000 feat: zoom in and out feature enable for
 fillintheblanks

---
 src/components/Practice/Mechanics3.jsx | 104 ++++++++++++++++++++++---
 1 file changed, 93 insertions(+), 11 deletions(-)

diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
index 7d9692c..c29a6c1 100644
--- a/src/components/Practice/Mechanics3.jsx
+++ b/src/components/Practice/Mechanics3.jsx
@@ -15,6 +15,9 @@ import correctSound from "../../assets/audio/correct.wav";
 import wrongSound from "../../assets/audio/wrong.wav";
 import removeSound from "../../assets/audio/remove.wav";
 import VoiceAnalyser from "../../utils/VoiceAnalyser";
+import { Modal } from "@mui/material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Mechanics2 = ({
   page,
@@ -54,7 +57,7 @@ const Mechanics2 = ({
 }) => {
   const [words, setWords] = useState([]);
   const [sentences, setSentences] = useState([]);
-
+  const [zoomOpen, setZoomOpen] = useState(false);
   const [selectedWord, setSelectedWord] = useState("");
   // const [loading, setLoading] = useState(false);
   const [shake, setShake] = useState(false);
@@ -255,17 +258,96 @@ const Mechanics2 = ({
                 },
               }}
             >
-              {image && (
-                <img
-                  src={image}
-                  style={{
-                    borderRadius: "20px",
-                    maxWidth: "100%",
-                    height: "clamp(150px, 20vw, 220px)",
+              <Box sx={{ position: "relative", cursor: "zoom-in" }}>
+                {image && (
+                  <img
+                    src={image}
+                    style={{
+                      borderRadius: "20px",
+                      maxWidth: "100%",
+                      height: "clamp(150px, 20vw, 220px)",
+                    }}
+                    alt=""
+                  />
+                )}
+
+                {/* Subtle gradient overlay across the top */}
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: "40px", // Height of the gradient overlay
+                    background:
+                      "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                    borderTopLeftRadius: "20px",
+                    borderTopRightRadius: "20px",
+                    display: "flex",
+                    alignItems: "center",
+                    paddingLeft: "8px",
                   }}
-                  alt=""
-                />
-              )}
+                >
+                  {/* Zoom icon positioned in the top-left corner */}
+                  <ZoomInIcon
+                    onClick={() => setZoomOpen(true)}
+                    sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
+                  />
+                </Box>
+              </Box>
+              <Modal
+                open={zoomOpen}
+                onClose={() => setZoomOpen(false)}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Box sx={{ position: "relative", outline: "none" }}>
+                  {/* Subtle gradient overlay at the top of the zoomed image */}
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: "40px", // Adjust height as needed
+                      background:
+                        "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      paddingRight: "8px",
+                      borderTopLeftRadius: "8px",
+                      borderTopRightRadius: "8px",
+                    }}
+                  >
+                    {/* Close icon positioned within the gradient overlay */}
+                    <CloseIcon
+                      onClick={() => setZoomOpen(false)}
+                      sx={{
+                        color: "white",
+                        fontSize: "24px",
+                        cursor: "pointer",
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                        borderRadius: "50%",
+                        padding: "4px",
+                      }}
+                    />
+                  </Box>
+
+                  <img
+                    src={image}
+                    alt="Zoomed content"
+                    style={{
+                      maxWidth: "90vw",
+                      maxHeight: "90vh",
+                      borderRadius: "8px",
+                    }}
+                  />
+                </Box>
+              </Modal>
             </Grid>
 
             <Box

From 06b12f8d82140b65651ff77e96f5604fc3ace4b7 Mon Sep 17 00:00:00 2001
From: Ajinkya Pande <ajinkya.pande@tekditechnologies.com>
Date: Mon, 4 Nov 2024 15:35:53 +0530
Subject: [PATCH 3/3] Issueid #0000 feat: zoom in and out feature enable for
 fillintheblanks

---
 src/components/Practice/Mechanics3.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
index c29a6c1..4d45453 100644
--- a/src/components/Practice/Mechanics3.jsx
+++ b/src/components/Practice/Mechanics3.jsx
@@ -304,7 +304,14 @@ const Mechanics2 = ({
                   justifyContent: "center",
                 }}
               >
-                <Box sx={{ position: "relative", outline: "none" }}>
+                <Box
+                  sx={{
+                    position: "relative",
+                    outline: "none",
+                    height: "500px",
+                    width: "500px",
+                  }}
+                >
                   {/* Subtle gradient overlay at the top of the zoomed image */}
                   <Box
                     sx={{
@@ -341,8 +348,10 @@ const Mechanics2 = ({
                     src={image}
                     alt="Zoomed content"
                     style={{
-                      maxWidth: "90vw",
-                      maxHeight: "90vh",
+                      // maxWidth: "90vw",
+                      // maxHeight: "90vh",
+                      // height:"500px",
+                      width: "100%",
                       borderRadius: "8px",
                     }}
                   />