questionlayoutrefactoring 0.0.86 → 0.0.89

package/dist/components/Molecules/optionLayouts/Scq.js

@@ -37,59 +37,13 @@ const imageModal_1 = __importDefault(require("../../Atoms/imageModal"));
 const crypto_1 = require("../../../utils/crypto");
 const react_2 = require("@chakra-ui/react");
 const ScqComponent = (props) => {
-    const { options, userAnswer, onAnswerSubmitted: propOnAnswerSubmitted, handleAnswerChange, option_image_details, currentQuestion, taskType, answer, isDontAllow, isStandaloneWithSubjectMapping, isStandalone, isFactual, styles, icons, presenterLogic, isComprehension, setLayoutType, modifiedOptions, displayedQues, isReviewScreen } = props;
-    const questionId = currentQuestion?.uuid;
-    const DEBUG = true;
-    // Debug utility functions
-    const setActiveQuestion = () => {
-        sessionStorage.setItem("activeDebugQuestion", questionId);
-    };
-    const log = (title, data = {}) => {
-        if (!DEBUG)
-            return;
-        const activeQuestion = sessionStorage.getItem("activeDebugQuestion");
-        if (activeQuestion && activeQuestion !== questionId)
-            return;
-        console.group(`%c[Q: ${questionId}] ${title}`, "color: #4CAF50; font-weight: bold; font-size: 12px;");
-        console.table(data);
-        console.groupEnd();
-    };
-    const logStyle = (optionIdx, styleData) => {
-        const activeQuestion = sessionStorage.getItem("activeDebugQuestion");
-        if (activeQuestion && activeQuestion !== questionId)
-            return;
-        console.group(`%c[Q: ${questionId}] Style Applied - Option ${optionIdx}`, "color: #2196F3; font-weight: bold; font-size: 12px;");
-        console.table(styleData);
-        console.groupEnd();
-    };
-    const logAnswerStyleDecision = (optionIdx, decisionData) => {
-        const activeQuestion = sessionStorage.getItem("activeDebugQuestion");
-        if (activeQuestion && activeQuestion !== questionId)
-            return;
-        console.group(`%c[Q: ${questionId}] Answer Style Decision - Option ${optionIdx}`, "color: #FF9800; font-weight: bold; font-size: 13px; background-color: #fff3e0; padding: 4px 8px;");
-        console.table(decisionData);
-        console.groupEnd();
-    };
-    const logHashingProcess = (data) => {
-        const activeQuestion = sessionStorage.getItem("activeDebugQuestion");
-        if (activeQuestion && activeQuestion !== questionId)
-            return;
-        console.group(`%c[Q: ${questionId}] Hashing Process`, "color: #9C27B0; font-weight: bold; font-size: 12px;");
-        console.table(data);
-        console.groupEnd();
-    };
-    const logRenderCycle = (data) => {
-        const activeQuestion = sessionStorage.getItem("activeDebugQuestion");
-        if (activeQuestion && activeQuestion !== questionId)
-            return;
-        console.group(`%c[Q: ${questionId}] Render Cycle`, "color: #E91E63; font-weight: bold; font-size: 12px;");
-        console.table(data);
-        console.groupEnd();
-    };
+    const { options, userAnswer, onAnswerSubmitted: propOnAnswerSubmitted, handleAnswerChange, option_image_details, currentQuestion, taskType, answer, isDontAllow, isStandaloneWithSubjectMapping, isStandalone, isFactual, styles, icons, presenterLogic, isComprehension, setLayoutType, modifiedOptions, 
+    // passphrase,
+    displayedQues, isReviewScreen } = props;
     const [windowWidth, setWindowWidth] = (0, react_1.useState)(typeof window !== "undefined" ? window.innerWidth : 1024);
     const [value, setValue] = (0, react_1.useState)(isReviewScreen
         ? undefined
-        : (0, common_utils_1.isNotEmptyOrNull)(userAnswer)
+        : (0, common_utils_1.isNotEmptyOrNull)(userAnswer) // First approach: initialize with extracted answer
             ? (0, common_utils_1.extractGivenAnswers)(userAnswer)?.[0]
             : "");
     const [selectedIndex, setSelectedIndex] = (0, react_1.useState)();
@@ -110,19 +64,9 @@ const ScqComponent = (props) => {
                 : isStandalone || isStandaloneWithSubjectMapping
                     ? LearningPathUtils_1.taskTypes?.standalone
                     : taskType));
+    // Hashing states
     const [hashedOptions, setHashedOptions] = (0, react_1.useState)({});
     const [isHashingComplete, setIsHashingComplete] = (0, react_1.useState)(isReviewScreen);
-    // Initialize
-    (0, react_1.useEffect)(() => {
-        setActiveQuestion();
-        log("Component Initialized", {
-            questionId,
-            isReviewScreen,
-            userAnswer,
-            taskType,
-            isFactual,
-        });
-    }, []);
     (0, react_1.useEffect)(() => {
         if (isReviewScreen) {
             let answerValue = (0, common_utils_1.isNotEmptyOrNull)(userAnswer)
@@ -130,21 +74,12 @@ const ScqComponent = (props) => {
                 : "";
             setValue(answerValue);
             setOptionsData(options.map((item) => (0, common_utils_1.handleRemoveExtraSpaceInBubbles)(item)));
-            log("Review Screen Setup", {
-                answerValue,
-                optionsCount: options.length,
-            });
         }
         else {
             setOptionsData(options);
             if (value && options) {
                 const index = options.findIndex((opt) => opt === value);
                 setSelectedIndex(index !== -1 ? index : undefined);
-                log("Options Data Updated", {
-                    selectedIndex: index !== -1 ? index : undefined,
-                    selectedValue: value,
-                    optionsCount: options.length,
-                });
             }
         }
     }, [options, userAnswer, isReviewScreen]);
@@ -153,16 +88,8 @@ const ScqComponent = (props) => {
         if (isReviewScreen)
             return;
         const computeHashedOptions = async () => {
-            if (!optionsData.length) {
-                log("Hashing Skipped - No Options", {});
+            if (!optionsData.length)
                 return;
-            }
-            logHashingProcess({
-                startTime: new Date().toISOString(),
-                optionsCount: optionsData.length,
-                hasAnswersIndexHashedKeys: (0, common_utils_1.isNotEmptyOrNull)(currentQuestion?.answers_index_hashed_keys),
-                hasAnswersKey: (0, common_utils_1.isNotEmptyOrNull)(currentQuestion?.answers_key),
-            });
             const hashed = {};
             for (let i = 0; i < optionsData.length; i++) {
                 const item = optionsData[i];
@@ -172,17 +99,9 @@ const ScqComponent = (props) => {
                         ? (0, crypto_1.answerEncryptText)(currentQuestion?.options_layout?.[i])
                         : item);
                 hashed[i] = data;
-                logHashingProcess({
-                    optionIndex: i,
-                    original: item.substring(0, 50),
-                    hashed: String(data).substring(0, 50),
-                });
             }
             setHashedOptions(hashed);
             setIsHashingComplete(true);
-            log("Hashing Complete", {
-                totalOptionsHashed: Object.keys(hashed).length,
-            });
         };
         computeHashedOptions();
     }, [
@@ -190,8 +109,9 @@ const ScqComponent = (props) => {
         currentQuestion?.uuid,
         currentQuestion?.answers_index_hashed_keys,
         currentQuestion?.answers_key,
-        isReviewScreen,
+        isReviewScreen
     ]);
+    // Get hashed option function
     const getHashedOption = (0, react_1.useCallback)((item, position) => {
         if (!isHashingComplete)
             return item;
@@ -200,36 +120,24 @@ const ScqComponent = (props) => {
     const handleOnChange = (0, react_1.useCallback)((item, index) => {
         setValue(item);
         setSelectedIndex(index);
-        log("Option Selected", {
-            selectedOption: item.substring(0, 50),
-            selectedIndex: index,
-            isReviewScreen,
-        });
         if (isReviewScreen) {
             return;
         }
         else {
             let selectedAnswer = getHashedOption(item, index);
-            log("Answer Change Triggered", {
-                selectedItem: item.substring(0, 50),
-                selectedHashedIndexAnswer: String(selectedAnswer).substring(0, 50),
-                selectedIndex: index,
-            });
             handleAnswerChange({
                 selectedItem: item,
                 selectedHashedIndexAnswer: selectedAnswer,
                 selectedIndex: index,
             });
         }
-    }, [getHashedOption, handleAnswerChange, isReviewScreen]);
+    }, [getHashedOption, handleAnswerChange]);
     const openImage = (0, react_1.useCallback)((index) => {
         setImageIndex(index);
         setIsOpen(true);
-        log("Image Opened", { imageIndex: index });
     }, []);
     const handleClose = (0, react_1.useCallback)(() => {
         setIsOpen(false);
-        log("Image Closed", {});
     }, []);
     (0, react_1.useEffect)(() => {
         if (!propOnAnswerSubmitted)
@@ -238,40 +146,54 @@ const ScqComponent = (props) => {
         if (!isReviewScreen) {
             const selectedAnswer = getHashedOption(value, selectedIndex);
             setValue(selectedAnswer);
-            log("Answer Submitted", {
-                submittedValue: String(selectedAnswer).substring(0, 50),
-                selectedIndex,
-            });
         }
-    }, [propOnAnswerSubmitted, getHashedOption, value, selectedIndex, isReviewScreen]);
+    }, [
+        propOnAnswerSubmitted,
+        getHashedOption,
+        value,
+        selectedIndex,
+        isReviewScreen,
+    ]);
     (0, react_1.useEffect)(() => {
-        const handleResize = () => {
-            setWindowWidth(window.innerWidth);
-            log("Window Resized", { newWidth: window.innerWidth });
-        };
+        const handleResize = () => setWindowWidth(window.innerWidth);
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, []);
     let isStudent = presenterLogic?.isStudent === common_utils_1.reviewUserRoles?.STUDENT;
+    // Screen configuration
     const screenConfig = (0, react_1.useMemo)(() => {
-        let config;
         if (windowWidth >= 1536)
-            config = { characterCount: isComprehension ? 20 : 30, screenSize: "desktop" };
-        else if (windowWidth >= 1400)
-            config = { characterCount: isComprehension ? 20 : 30, screenSize: "desktop" };
-        else if (windowWidth >= 1280)
-            config = { characterCount: isComprehension ? 18 : 24, screenSize: "desktop" };
-        else if (windowWidth >= 1100)
-            config = { characterCount: isComprehension ? 16 : 20, screenSize: "desktop" };
-        else if (windowWidth >= 992)
-            config = { characterCount: isComprehension ? 10 : 14, screenSize: "desktop" };
-        else if (windowWidth >= 768)
-            config = { characterCount: isComprehension ? 10 : 12, screenSize: "tablet" };
-        else
-            config = { characterCount: 6, screenSize: "mobile" };
-        log("Screen Config", { windowWidth, ...config });
-        return config;
-    }, [windowWidth, isComprehension]);
+            return {
+                characterCount: isComprehension ? 20 : 30,
+                screenSize: "desktop",
+            };
+        if (windowWidth >= 1400)
+            return {
+                characterCount: isComprehension ? 20 : 30,
+                screenSize: "desktop",
+            };
+        if (windowWidth >= 1280)
+            return {
+                characterCount: isComprehension ? 18 : 24,
+                screenSize: "desktop",
+            };
+        if (windowWidth >= 1100)
+            return {
+                characterCount: isComprehension ? 16 : 20,
+                screenSize: "desktop",
+            };
+        if (windowWidth >= 992)
+            return {
+                characterCount: isComprehension ? 10 : 14,
+                screenSize: "desktop",
+            };
+        if (windowWidth >= 768)
+            return {
+                characterCount: isComprehension ? 10 : 12,
+                screenSize: "tablet",
+            };
+        return { characterCount: 6, screenSize: "mobile" };
+    }, [windowWidth]);
     const stringLengthAnalysis = (0, react_1.useMemo)(() => {
         const { characterCount } = screenConfig;
         return {
@@ -282,35 +204,23 @@ const ScqComponent = (props) => {
     const layoutType = (0, react_1.useMemo)(() => {
         const { screenSize } = screenConfig;
         const { hasLongStrings, hasVeryLongStrings } = stringLengthAnalysis;
-        let type;
         if (option_image_details?.length > 0) {
-            type = screenSize === "mobile" ? "column" : "twoRows";
-        }
-        else if (screenSize === "mobile") {
-            type = "column";
+            if (screenSize === "mobile")
+                return "column";
+            return "twoRows";
         }
-        else if (screenSize === "tablet") {
-            type = hasLongStrings ? "column" : "twoRows";
-        }
-        else if (screenSize === "desktop") {
+        if (screenSize === "mobile")
+            return "column";
+        if (screenSize === "tablet")
+            return hasLongStrings ? "column" : "twoRows";
+        if (screenSize === "desktop") {
             if (hasVeryLongStrings)
-                type = "column";
-            else if (hasLongStrings)
-                type = "twoRows";
-            else
-                type = "row";
-        }
-        else {
-            type = "row";
+                return "column";
+            if (hasLongStrings)
+                return "twoRows";
+            return "row";
         }
-        log("Layout Type Determined", {
-            layoutType: type,
-            screenSize,
-            hasLongStrings,
-            hasVeryLongStrings,
-            hasImages: option_image_details?.length > 0,
-        });
-        return type;
+        return "row";
     }, [screenConfig, stringLengthAnalysis, option_image_details]);
     (0, react_1.useEffect)(() => {
         setLayoutType?.(layoutType);
@@ -335,16 +245,12 @@ const ScqComponent = (props) => {
         }
         const hasImages = imagesList?.length > 0;
         if (!answerSubmitted) {
-            const style = hashedItem === hashedValue
-                ? hasImages ? "scq-card-selected" : "scq-card-selected-noimage"
-                : hasImages ? "scq-card" : "scq-card-noimage";
-            logAnswerStyleDecision(index, {
-                stage: "beforeSubmit",
-                answerSubmitted: false,
-                isSelected: hashedItem === hashedValue,
-                style,
-            });
-            return style;
+            if (hashedItem === hashedValue) {
+                return hasImages ? "scq-card-selected" : "scq-card-selected-noimage";
+            }
+            else {
+                return hasImages ? "scq-card" : "scq-card-noimage";
+            }
         }
         const isCorrectAnswer = isReviewScreen
             ? (0, common_utils_1.isNotEmptyOrNull)(currentQuestion?.answers_index_hashed_keys)
@@ -362,99 +268,64 @@ const ScqComponent = (props) => {
             ? displayedQues?.[index]?.isSubmitted !== true
             : !answerSubmitted;
         if (isAnswerNotSubmitted && !isReviewScreen) {
-            const style = hashedItem === hashedValue
-                ? hasImages ? "scq-card-selected" : "scq-card-selected-noimage"
-                : hasImages ? "scq-card" : "scq-card-noimage";
-            logAnswerStyleDecision(index, {
-                stage: "answerNotSubmitted",
-                isSelected: hashedItem === hashedValue,
-                style,
-            });
-            return style;
+            if (hashedItem === hashedValue) {
+                return hasImages ? "scq-card-selected" : "scq-card-selected-noimage";
+            }
+            else {
+                return hasImages ? "scq-card" : "scq-card-noimage";
+            }
         }
         if (isCorrectAnswer) {
             if (shouldShowCorrectFeedback) {
-                const style = hasImages ? "scq-card-correct" : "scq-card-correct-noimage";
-                logAnswerStyleDecision(index, {
-                    stage: "correctAnswerShow",
-                    isCorrect: true,
-                    shouldShowFeedback: true,
-                    style,
-                });
-                return style;
+                return hasImages ? "scq-card-correct" : "scq-card-correct-noimage";
             }
             else {
                 if (isUserSelection) {
-                    const style = isReviewScreen
-                        ? hasImages ? "scq-card-selected" : "scq-card-selected-noimage"
-                        : taskType === LearningPathUtils_1.taskTypes.assessment || isFactual
-                            ? hasImages ? "scq-card" : "scq-card-noimage"
-                            : hasImages ? "scq-card-selected" : "scq-card-selected-noimage";
-                    logAnswerStyleDecision(index, {
-                        stage: "correctButNoFeedback",
-                        isCorrect: true,
-                        isUserSelection: true,
-                        isReviewScreen,
-                        style,
-                    });
-                    return style;
+                    if (isReviewScreen) {
+                        return hasImages ? "scq-card-selected" : "scq-card-selected-noimage";
+                    }
+                    else {
+                        return taskType === LearningPathUtils_1.taskTypes.assessment || isFactual
+                            ? hasImages ? "scq-card-selected" : "scq-card-selected-noimage"
+                            : hasImages
+                                ? "scq-card-selected"
+                                : "scq-card-selected-noimage";
+                    }
                 }
                 else {
-                    const style = hasImages ? "scq-card" : "scq-card-noimage";
-                    logAnswerStyleDecision(index, {
-                        stage: "correctButNotSelected",
-                        isCorrect: true,
-                        isUserSelection: false,
-                        style,
-                    });
-                    return style;
+                    return hasImages ? "scq-card" : "scq-card-noimage";
                 }
             }
         }
         if (isUserSelection) {
             if (shouldShowWrongFeedback) {
-                const style = hasImages ? "scq-card-wrong" : "scq-card-wrong-noimage";
-                logAnswerStyleDecision(index, {
-                    stage: "wrongAnswerShow",
-                    isUserSelection: true,
-                    shouldShowFeedback: true,
-                    style,
-                });
-                return style;
+                return hasImages ? "scq-card-wrong" : "scq-card-wrong-noimage";
             }
             else {
-                const style = isReviewScreen
-                    ? hasImages ? "scq-card-selected" : "scq-card-selected-noimage"
+                return isReviewScreen
+                    ? hasImages
+                        ? "scq-card-selected"
+                        : "scq-card-selected-noimage"
                     : taskType === LearningPathUtils_1.taskTypes.assessment || isFactual
-                        ? hasImages ? "scq-card-selected" : "scq-card-selected-noimage"
-                        : hasImages ? "scq-card-selected" : "scq-card-selected-noimage";
-                logAnswerStyleDecision(index, {
-                    stage: "wrongButNoFeedback",
-                    isUserSelection: true,
-                    shouldShowFeedback: false,
-                    style,
-                });
-                return style;
+                        ? hasImages
+                            ? "scq-card-selected"
+                            : "scq-card-selected-noimage"
+                        : hasImages
+                            ? "scq-card-selected"
+                            : "scq-card-selected-noimage";
             }
         }
-        const style = hasImages ? "scq-card" : "scq-card-noimage";
-        logAnswerStyleDecision(index, {
-            stage: "default",
-            style,
-        });
-        return style;
+        return hasImages ? "scq-card" : "scq-card-noimage";
     }, [
         getHashedOption,
         optionsData,
         crypto_1.answers_index_hashed_keys,
         presentationMode,
         answer,
+        answer,
         taskType,
         isFactual,
         common_utils_1.passphrase,
-        isReviewScreen,
-        displayedQues,
-        currentQuestion,
     ]);
     const renderSingleOption = (0, react_1.useCallback)((optionContent, idx, isColumn = false) => {
         const label = (0, common_utils_1.getCharacterFromNumber)(idx);
@@ -488,14 +359,6 @@ const ScqComponent = (props) => {
         };
         const imageBlock = option_image_details?.length > 0 &&
             option_image_details[idx] && ((0, jsx_runtime_1.jsx)(react_2.Box, { className: styles.optionImage, children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: option_image_details[idx]?.url, onClick: () => openImage(idx), alt: `Image ${idx}`, className: styles["scq-image"], style: { cursor: "pointer" } }) }));
-        logStyle(idx, {
-            answerStyle,
-            isSelected,
-            isCorrectAnswerShown,
-            allowClick,
-            textClass: getTextClass(),
-            hasImages: !!imageBlock,
-        });
         if (isStudent || !isReviewScreen) {
             return ((0, jsx_runtime_1.jsxs)(react_2.Box, { className: [
                     styles.optionContainer,
@@ -507,7 +370,7 @@ const ScqComponent = (props) => {
                     styles[answerStyle],
                 ]
                     .filter(Boolean)
-                    .join(" "), onClick: () => allowClick && handleOnChange(optionContent, idx), style: {
+                    .join(" "), onClick: () => allowClick && handleOnChange(optionContent), style: {
                     cursor: allowClick ? "pointer" : "default",
                     pointerEvents: isDontAllow ? "none" : "auto",
                 }, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { className: styles.optionContainerLeft, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: styles.character, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { className: `${styles.optionDetails} ${styles[getTextClass()]}`, style: textColor, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, tutor_utils_1.renderContent)(modifiedOptions?.[idx] || optionContent) }), imageBlock] })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { className: styles.optionContainerRight, children: (0, jsx_runtime_1.jsx)(react_2.Image, { className: `${styles.answerIndicator} ${correctAnswer || wrongAnswer
@@ -516,7 +379,7 @@ const ScqComponent = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(react_2.Box, { className: `${styles[answerStyle]} ${layoutType === "twoRows" && option_image_details?.length === 0
                 ? styles.twoRowOptions
-                : ""}`, onClick: () => allowClick && handleOnChange(optionContent, idx), style: {
+                : ""}`, onClick: () => allowClick && handleOnChange(optionContent), style: {
                 cursor: allowClick ? "pointer" : "default",
                 pointerEvents: isDontAllow ? "none" : "auto",
             }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { borderRadius: "50%", padding: "8px", color: "#F1F1F1", display: "flex", justifyContent: "center", alignItems: "center", h: "28px", bgColor: correctAnswer ? "#456125" : "#414141", borderColor: correctAnswer ? "#456125" : "#414141", borderWidth: "1px", children: (0, jsx_runtime_1.jsx)(react_2.Text, { as: "b", fontSize: "14px", fontFamily: "Inter, sans-serif", children: label }) }), (0, jsx_runtime_1.jsxs)("div", { className: styles["scq-content"], children: [(0, jsx_runtime_1.jsx)(react_2.Text, { className: styles[getTextClass()], color: correctAnswer || wrongAnswer ? "white" : "", children: (0, tutor_utils_1.renderContent)(optionContent) }), imageBlock] })] }) }, idx));
@@ -530,41 +393,20 @@ const ScqComponent = (props) => {
         isReviewScreen,
         isFactual,
         layoutType,
-        icons,
-        styles,
-        modifiedOptions,
-        option_image_details,
-        taskType,
-        currentQuestion,
-        isStudent,
-        isDontAllow,
-        isComprehension,
     ]);
     const renderedOptions = (0, react_1.useMemo)(() => {
-        if (!options?.length) {
-            logRenderCycle({ status: "noOptions" });
+        if (!options?.length)
             return null;
-        }
         if (layoutType === "twoRows") {
             const rows = [];
             for (let i = 0; i < options?.length; i += 2) {
                 rows.push(options?.slice(i, i + 2));
             }
-            logRenderCycle({
-                layoutType: "twoRows",
-                totalRows: rows.length,
-                optionsPerRow: 2,
-            });
             return ((0, jsx_runtime_1.jsx)(react_2.Box, { className: styles?.twoRowsWrapper, children: rows.map((row, rowIndex) => ((0, jsx_runtime_1.jsx)(react_2.Box, { className: styles?.rowContainer, children: row.map((optionContent, idx) => {
                         const actualIndex = rowIndex * 2 + idx;
                         return ((0, jsx_runtime_1.jsx)(react_2.Box, { children: renderSingleOption(optionContent, actualIndex, false) }, actualIndex));
                     }) }, rowIndex))) }));
         }
-        logRenderCycle({
-            layoutType,
-            isColumn: layoutType === "column",
-            totalOptions: options.length,
-        });
         return options.map((optionContent, idx) => renderSingleOption(optionContent, idx, layoutType === "column"));
     }, [options, layoutType, renderSingleOption, styles]);
     const wrapperClasses = (0, react_1.useMemo)(() => {
@@ -573,20 +415,12 @@ const ScqComponent = (props) => {
             classes.push(styles?.columnWrapper);
         if (layoutType === "twoRows")
             classes.push(styles?.twoRowsContainer);
-        const finalClasses = classes.join(" ");
-        log("Wrapper Classes", { classes: finalClasses });
-        return finalClasses;
+        return classes.join(" ");
     }, [layoutType, styles]);
+    // Show loading while hashing is in progress
     if (!isHashingComplete) {
-        log("Hashing In Progress", { isHashingComplete: false });
         return (0, jsx_runtime_1.jsx)(react_2.Box, { children: "Loading options..." });
     }
-    log("Component Rendered", {
-        optionsCount: options?.length,
-        layoutType,
-        isReviewScreen,
-        isStudent,
-    });
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { style: isDontAllow ? { pointerEvents: "none" } : {}, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { className: wrapperClasses, children: renderedOptions }), isOpen && ((0, jsx_runtime_1.jsx)(imageModal_1.default, { isOpen: isOpen, handleClose: handleClose, url: option_image_details?.[imageIndex]?.url }, Math.random()))] }));
 };
 exports.default = ScqComponent;