Update app.py

app.py

@@ -772,7 +772,6 @@ body, .stApp {
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
-
 def enhanced_likert_scale(question_data):
     """لیکرت اسکیل با دکمه‌های رادیویی افقی و مرکزی در Streamlit"""
     question = question_data["question"]
@@ -804,14 +803,40 @@ def enhanced_likert_scale(question_data):
     
     for i in range(scale):
         with cols[i + 2]:  # شروع از ستون دوم (پس از برچسب‌ها)
-            if st.button(options[i], key=f"{key}_btn_{i}", disabled=selected_value != 0 and selected_value != int(options[i])):
-                st.session_state[key] = int(options[i])
+            button_html = f"""
+            <button class="likert-button" data-value="{options[i]}" 
+                    style="margin: 0 5px; width: 30px; height: 30px; border-radius: 50%; padding: 0; 
+                           text-align: center; line-height: 30px; background-color: #fff; 
+                           border: 2px solid #6a0dad; color: #6a0dad;"
+                    onclick="parent.window.parent.postMessage({{type: 'button_click', value: {options[i]}}}, '*')">
+                {options[i]}
+            </button>
+            <script>
+                window.addEventListener('message', function(event) {{
+                    if (event.data.type === 'button_click') {{
+                        parent.window.parent.postMessage({{type: 'update_session', key: '{key}', value: event.data.value}}, '*');
+                    }}
+                }});
+                // بررسی اولیه برای مقدار فعلی
+                if ({selected_value} === {int(options[i])}) {{
+                    document.querySelector('.likert-button[data-value="{options[i]}"]').disabled = false;
+                    document.querySelector('.likert-button[data-value="{options[i]}"]').style.backgroundColor = '#6a0dad';
+                    document.querySelector('.likert-button[data-value="{options[i]}"]').style.color = '#fff';
+                }}
+            </script>
+            """
+            st.components.v1.html(button_html, height=40)
 
     # نمایش برچسب سمت چپ
     with cols[1]:
         st.markdown(f"<div style='text-align:left; font-size:14px; font-weight:bold; color:#6a0dad; direction: rtl;'>{labels[1]}</div>", 
                     unsafe_allow_html=True)
 
+    # به‌روزرسانی session_state بر اساس پیام
+    if "button_click_value" in st.session_state and st.session_state["button_click_value"] is not None:
+        st.session_state[key] = st.session_state["button_click_value"]
+        del st.session_state["button_click_value"]
+
     # نمایش پاسخ انتخاب‌شده
     if st.session_state[key] != 0:
         st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl;'>پاسخ شما: {st.session_state[key]}</p>", 
@@ -820,7 +845,7 @@ def enhanced_likert_scale(question_data):
         st.markdown(f"<p style='text-align:right; color:#6a0dad; direction: rtl;'>پاسخ شما: هنوز انتخاب نشده</p>", 
                     unsafe_allow_html=True)
 
-    # خط جداکننده بنفش و تنظیم چیدمان
+    # خط جداکننده بنفش و استایل‌های سفارشی
     st.markdown("""
     <style>
         .likert-separator {
@@ -830,25 +855,31 @@ def enhanced_likert_scale(question_data):
             margin: 20px auto;
             direction: rtl;
         }
+        /* استایل خاص برای دکمه‌های لیکرت */
+        .likert-button {
+            margin: 0 5px !important;
+            width: 30px !important;
+            height: 30px !important;
+            border-radius: 50% !important;
+            padding: 0 !important;
+            text-align: center !important;
+            line-height: 30px !important;
+            background-color: #fff !important;
+            border: 2px solid #6a0dad !important;
+            color: #6a0dad !important;
+            cursor: pointer !important;
+        }
+        .likert-button:disabled {
+            background-color: #6a0dad !important;
+            color: #fff !important;
+        }
         /* اجبار به چیدمان افقی در موبایل */
         @media (max-width: 768px) {
             .likert-separator {
                 width: 90%;
             }
-            [data-testid="stHorizontalBlock"] {
-                display: flex !important;
-                flex-direction: row !important;
-                justify-content: center !important;
-                align-items: center !important;
-            }
-            button {
+            [data-testid="stHorizontalBlock"] .likert-button {
                 margin: 0 2px !important;
-                width: 30px !important;
-                height: 30px !important;
-                border-radius: 50% !important;
-                padding: 0 !important;
-                text-align: center !important;
-                line-height: 30px !important;
             }
         }
         /* تنظیم مرکزیت در فریم موبایل (475px) */
@@ -858,31 +889,12 @@ def enhanced_likert_scale(question_data):
                 width: 475px !important;
                 margin: 0 auto !important;
             }
-            button {
-                margin: 0 5px !important;
-                width: 30px !important;
-                height: 30px !important;
-                border-radius: 50% !important;
-                padding: 0 !important;
-                text-align: center !important;
-                line-height: 30px !important;
-            }
-        }
-        button {
-            background-color: #fff !important;
-            border: 2px solid #6a0dad !important;
-            color: #6a0dad !important;
-        }
-        button:disabled {
-            background-color: #6a0dad !important;
-            color: #fff !important;
         }
     </style>
     <div class="likert-separator"></div>
     """, unsafe_allow_html=True)
 
     return st.session_state.get(key)
-    
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران