Update app.py

app.py

@@ -808,58 +808,71 @@ def enhanced_likert_scale(question_data):
     if selected_value is not None:
         st.session_state[key] = selected_value
 
-    onclick_js = "parent.document.querySelectorAll('div[data-testid=\"stRadio\"] input[type=\"radio\"]')[{i}].click()"
-    # نمایش دکمه‌های سفارشی
-    st.markdown(
-        """
+    # ایجاد دکمه‌های سفارشی با JavaScript اختصاصی
+    components.html(
+        f"""
+        <script>
+        function selectOption(value) {{
+            const radioInput = parent.document.querySelector('input[type="radio"][value="' + value + '"]');
+            if (radioInput) {{
+                radioInput.click();
+            }}
+        }}
+        </script>
+        
         <style>
-            div[data-testid="stRadio"] > div[role="radiogroup"] {
-                display: none !important;
-            }
-            .custom-likert-container {
-                display: flex;
-                justify-content: space-between;
-                max-width: 475px;
-                margin: 0 auto;
-                direction: rtl;
-            }
-            .likert-option {
-                width: 28px;
-                height: 28px;
-                border-radius: 50%;
-                background: white;
-                border: 2px solid #6a0dad;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                margin: 0 5px;
-                position: relative;
-            }
-            .likert-option.selected {
-                background: #6a0dad;
-            }
-            .likert-number {
-                color: #6a0dad;
-                font-weight: bold;
-                font-size: 14px;
-            }
-            .likert-option.selected .likert-number {
-                color: white;
-            }
+        .likert-container {{
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            max-width: 475px;
+            margin: 0 auto;
+            direction: rtl;
+        }}
+        .likert-option {{
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: white;
+            border: 2px solid #6a0dad;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            margin: 0 2px;
+            transition: all 0.2s;
+        }}
+        .likert-option:hover {{
+            transform: scale(1.1);
+            box-shadow: 0 0 8px rgba(106, 13, 173, 0.3);
+        }}
+        .likert-option.selected {{
+            background: #6a0dad;
+        }}
+        .likert-number {{
+            color: #6a0dad;
+            font-weight: bold;
+            font-size: 14px;
+            user-select: none;
+        }}
+        .likert-option.selected .likert-number {{
+            color: white;
+        }}
         </style>
-        """ +
-        ''.join([
-            f'<div class="likert-option {"selected" if st.session_state.get(key) == i+1 else ""}" onclick="{onclick_js.format(i=i)}">'
-            f'<span class="likert-number">{i+1}</span>'
-            '</div>'
-            for i in range(scale)
-        ]) +
-        "</div>",
-        unsafe_allow_html=True
+        
+        <div class="likert-container">
+            {"".join([
+                f'<div class="likert-option {"selected" if st.session_state.get(key) == i+1 else ""}" onclick="selectOption({i+1})">'
+                f'<span class="likert-number">{i+1}</span>'
+                '</div>'
+                for i in range(scale)
+            ])}
+        </div>
+        """,
+        height=50
     )
 
-    # نمایش پاسخ انتخاب شده
+    # نمایش وضعیت انتخاب
     status = f"پاسخ شما: {st.session_state[key]}" if st.session_state.get(key) else "پاسخ شما: هنوز انتخاب نشده"
     st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl; margin-top:10px;'>{status}</p>", 
                 unsafe_allow_html=True)