Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های کاملاً HTML بدون دکمه تأیید"""
+    """لیکرت اسکیل با دکمه‌های HTML روی دکمه‌های Streamlit"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -779,8 +779,9 @@ def enhanced_likert_scale(question_data):
             flex-wrap: wrap !important;
             margin: 10px 0 !important;
         }}
-        /* استایل دکمه‌های لیکرت */
+        /* استایل دکمه‌های لیکرت (HTML) */
         .likert-btn {{
+            position: absolute !important;
             width: 40px !important;
             height: 40px !important;
             border-radius: 50% !important;
@@ -793,6 +794,7 @@ def enhanced_likert_scale(question_data):
             transition: all 0.3s ease !important;
             font-size: 18px !important;
             color: #6a0dad !important;
+            z-index: 10 !important;
         }}
         .likert-btn.selected {{
             background: #6a0dad !important;
@@ -803,6 +805,17 @@ def enhanced_likert_scale(question_data):
             background: #f0e6ff !important;
             transform: scale(1.1) !important;
         }}
+        /* مخفی کردن دکمه‌های Streamlit */
+        .likert-streamlit-btn {{
+            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;
+        }}
         /* استایل پاسخ انتخاب‌شده */
         .likert-response {{
             text-align: center !important;
@@ -827,61 +840,70 @@ def enhanced_likert_scale(question_data):
         is_selected = st.session_state[key] == value
         html_content += f"""
             <button class="likert-btn {'selected' if is_selected else ''}"
-                    onclick="selectLikert('{key}', {value})">
+                    onclick="document.getElementById('streamlit-btn-{key}-{value}').click()">
                 {'•' if is_selected else '○'}
             </button>
         """
     
-    html_content += f"""
-        </div>
-        <div class="likert-response" id="likert-response-{key}">
-            پاسخ شما: {st.session_state[key] or "هیچکدام"}
+    html_content += """
         </div>
     </div>
-    <script>
-        function selectLikert(key, value) {{
-            // به‌روزرسانی استایل دکمه‌ها
-            const buttons = document.querySelectorAll('#likert-buttons-{key} .likert-btn');
-            buttons.forEach(btn => btn.classList.remove('selected'));
-            event.currentTarget.classList.add('selected');
-            // به‌روزرسانی متن پاسخ
-            document.getElementById('likert-response-{key}').innerText = 'پاسخ شما: ' + value;
-            // فعال کردن دکمه مخفی Streamlit
-            document.getElementById('hidden-btn-{key}-{value}').click();
-        }}
-    </script>
     """
     
-    # رندر HTML
-    components.html(html_content, height=200)
+    # نمایش سوال و لیبل‌ها با 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)
     
-    # ایجاد دکمه‌های مخفی Streamlit برای مدیریت کلیک‌ها
+    # ایجاد دکمه‌های Streamlit با پوشش دکمه‌های HTML
+    btn_cols = st.columns(scale)
     for i in range(scale):
-        value = scale - i
-        # دکمه‌های مخفی با CSS غیرقابل‌مشاهده می‌شوند
-        st.markdown(
-            f"""
-            <style>
-                #hidden-btn-{key}-{value} {{
-                    display: none !important;
-                }}
-            </style>
-            """,
-            unsafe_allow_html=True
-        )
-        if st.button(
-            "hidden",
-            key=f"hidden-btn-{key}-{value}",
-            help=str(value),
-            type="secondary",
-            use_container_width=True
-        ):
-            st.session_state[key] = value
-            st.rerun()
+        with btn_cols[i]:
+            value = scale - i  # 7 تا 1
+            is_selected = st.session_state[key] == value
+            
+            # دکمه 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>
+                """,
+                unsafe_allow_html=True
+            )
+            if st.button(
+                "•" if is_selected else "○",
+                key=f"streamlit-btn-{key}-{value}",
+                help=str(value),
+                type="secondary",
+                use_container_width=True
+            ):
+                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)
 
-    
+ 
+            
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران