Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های HTML روی دکمه‌های Streamlit"""
+    """لیکرت اسکیل با دکمه‌های HTML کاملاً غالب روی دکمه‌های Streamlit"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -758,6 +758,7 @@ def enhanced_likert_scale(question_data):
             direction: rtl !important;
             text-align: center !important;
             margin: 20px 0 !important;
+            position: relative !important;
         }}
         .likert-question {{
             font-size: 18px !important;
@@ -778,6 +779,8 @@ def enhanced_likert_scale(question_data):
             gap: 8px !important;
             flex-wrap: wrap !important;
             margin: 10px 0 !important;
+            position: relative !important;
+            height: 40px !important;
         }}
         /* استایل دکمه‌های لیکرت (HTML) */
         .likert-btn {{
@@ -794,7 +797,7 @@ def enhanced_likert_scale(question_data):
             transition: all 0.3s ease !important;
             font-size: 18px !important;
             color: #6a0dad !important;
-            z-index: 10 !important;
+            z-index: 1000 !important;
         }}
         .likert-btn.selected {{
             background: #6a0dad !important;
@@ -806,15 +809,24 @@ def enhanced_likert_scale(question_data):
             transform: scale(1.1) !important;
         }}
         /* مخفی کردن دکمه‌های Streamlit */
+        .likert-streamlit-btn-container {{
+            position: relative !important;
+            width: 40px !important;
+            height: 40px !important;
+            margin: 0 auto !important;
+        }}
         .likert-streamlit-btn {{
             width: 40px !important;
             height: 40px !important;
             opacity: 0 !important;
-            position: relative !important;
-            margin: 0 auto !important;
+            position: absolute !important;
+            top: 0 !important;
+            left: 0 !important;
+            margin: 0 !important;
             padding: 0 !important;
             border: none !important;
             background: transparent !important;
+            z-index: 1 !important;
         }}
         /* استایل پاسخ انتخاب‌شده */
         .likert-response {{
@@ -834,75 +846,80 @@ def enhanced_likert_scale(question_data):
         <div class="likert-buttons" id="likert-buttons-{key}">
     """
     
+    # محاسبه موقعیت دکمه‌های HTML
+    button_width = 40
+    gap = 8
+    total_width = scale * button_width + (scale - 1) * gap
+    start_x = -total_width / 2  # برای وسط‌چین کردن دکمه‌ها
+    
     # افزودن دکمه‌های HTML
     for i in range(scale):
         value = scale - i  # 7 تا 1
         is_selected = st.session_state[key] == value
+        x_position = start_x + i * (button_width + gap)
         html_content += f"""
             <button class="likert-btn {'selected' if is_selected else ''}"
+                    style="left: calc(50% + {x_position}px);"
                     onclick="document.getElementById('streamlit-btn-{key}-{value}').click()">
                 {'•' if is_selected else '○'}
             </button>
         """
     
-    html_content += """
+    html_content += f"""
+        </div>
+        <div class="likert-response" id="likert-response-{key}">
+            پاسخ شما: {st.session_state[key] or "هیچکدام"}
         </div>
     </div>
     """
     
-    # نمایش سوال و لیبل‌ها با Streamlit
-    st.markdown(f"<div class='likert-container'><div class='likert-question'>{question}</div></div>", unsafe_allow_html=True)
-    col1, col2 = st.columns(2)
-    with col1:
-        st.markdown(f"<div class='likert-labels' style='text-align:right'>{labels[0]}</div>", unsafe_allow_html=True)
-    with col2:
-        st.markdown(f"<div class='likert-labels' style='text-align:left'>{labels[1]}</div>", unsafe_allow_html=True)
+    # رندر HTML
+    components.html(html_content, height=150)
     
-    # ایجاد دکمه‌های Streamlit با پوشش دکمه‌های HTML
+    # ایجاد دکمه‌های Streamlit
     btn_cols = st.columns(scale)
     for i in range(scale):
         with btn_cols[i]:
             value = scale - i  # 7 تا 1
-            is_selected = st.session_state[key] == value
-            
-            # دکمه Streamlit
+            # کانتینر برای دکمه Streamlit
             st.markdown(
                 f"""
-                <style>
-                    #streamlit-btn-{key}-{value} {{
-                        width: 40px !important;
-                        height: 40px !important;
-                        opacity: 0 !important;
-                        position: relative !important;
-                        margin: 0 auto !important;
-                        padding: 0 !important;
-                        border: none !important;
-                        background: transparent !important;
-                    }}
-                </style>
+                <div class="likert-streamlit-btn-container">
+                    <style>
+                        #streamlit-btn-{key}-{value} {{
+                            width: 40px !important;
+                            height: 40px !important;
+                            opacity: 0 !important;
+                            position: absolute !important;
+                            top: 0 !important;
+                            left: 0 !important;
+                            margin: 0 !important;
+                            padding: 0 !important;
+                            border: none !important;
+                            background: transparent !important;
+                            z-index: 1 !important;
+                        }}
+                        #streamlit-btn-{key}-{value}:hover,
+                        #streamlit-btn-{key}-{value}:focus,
+                        #streamlit-btn-{key}-{value}:active {{
+                            border: none !important;
+                            background: transparent !important;
+                        }}
+                    </style>
+                </div>
                 """,
                 unsafe_allow_html=True
             )
             if st.button(
-                "•" if is_selected else "○",
+                "•" if st.session_state[key] == value else "○",
                 key=f"streamlit-btn-{key}-{value}",
                 help=str(value),
-                type="secondary",
-                use_container_width=True
+                type="secondary"
             ):
                 st.session_state[key] = value
                 st.rerun()
     
-    # رندر دکمه‌های HTML روی دکمه‌های Streamlit
-    components.html(html_content, height=60)
-    
-    # نمایش پاسخ انتخاب‌شده
-    if st.session_state[key] is not None:
-        st.markdown(f"<div class='likert-response'>پاسخ شما: {st.session_state[key]}</div>", unsafe_allow_html=True)
-    
-    return st.session_state.get(key)
-
- 
+    return st.session_state.get(key) 
             
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""