Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با st.radio و دکمه‌های دایره‌ای تو یه ردیف"""
+    """لیکرت اسکیل فقط با فیچرهای Streamlit و دکمه‌های دایره‌ای ریسپانسیو"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -749,7 +749,7 @@ def enhanced_likert_scale(question_data):
     if key not in st.session_state:
         st.session_state[key] = None
     
-    # استایل‌دهی سفارشی برای دکمه‌های radio
+    # استایل‌دهی سفارشی برای دکمه‌های Streamlit
     st.markdown(
         f"""
         <style>
@@ -769,23 +769,22 @@ def enhanced_likert_scale(question_data):
             .likert-labels {{
                 display: flex !important;
                 justify-content: space-between !important;
-                align-items: center !important;
                 font-size: 14px !important;
                 margin-bottom: 10px !important;
                 color: #666666 !important;
             }}
             /* استایل ردیف دکمه‌ها */
-            .stRadio > div {{
+            .likert-buttons {{
                 display: flex !important;
                 justify-content: center !important;
                 gap: 4px !important;
-                flex-wrap: nowrap !important;
+                flex-wrap: wrap !important;
                 margin: 0 !important;
                 padding: 0 !important;
                 align-items: center !important;
             }}
-            /* استایل دکمه‌های radio */
-            .stRadio > div > label > div > div > div {{
+            /* استایل دکمه‌های Streamlit */
+            div.stButton > button[key^="streamlit-btn-{key}-"] {{
                 width: 20px !important;
                 height: 20px !important;
                 border-radius: 50% !important;
@@ -797,38 +796,38 @@ def enhanced_likert_scale(question_data):
                 margin: 0 !important;
                 box-shadow: none !important;
                 outline: none !important;
-                line-height: 1 !important;
-                display: flex !important;
-                align-items: center !important;
-                justify-content: center !important;
             }}
-            .stRadio > div > label > div > div > div:hover {{
+            div.stButton > button[key^="streamlit-btn-{key}-"]:hover {{
                 background: #e0e0e0 !important;
             }}
-            .stRadio > div > label > div > div > div[data-baseweb="radio"] input:checked ~ div {{
+            div.stButton > button[key^="streamlit-btn-{key}-"]:focus,
+            div.stButton > button[key^="streamlit-btn-{key}-"]:active {{
+                background: black !important;
+                color: white !important;
+            }}
+            /* استایل دکمه انتخاب‌شده */
+            div.stButton > button[key="streamlit-btn-{key}-{st.session_state[key] if st.session_state[key] else 'none'}"] {{
                 background: black !important;
                 color: white !important;
             }}
+            /* استایل پاسخ */
+            .likert-response {{
+                text-align: center !important;
+                color: #6a0dad !important;
+                font-weight: bold !important;
+                margin-top: 10px !important;
+                font-size: 16px !important;
+            }}
             /* ریسپانسیو کردن */
             @media (max-width: 600px) {{
-                .stRadio > div {{
+                .likert-buttons {{
                     gap: 2px !important;
                 }}
-                .stRadio > div > label > div > div > div {{
+                div.stButton > button[key^="streamlit-btn-{key}-"] {{
                     width: 18px !important;
                     height: 18px !important;
                     font-size: 12px !important;
                 }}
-                .likert-labels {{
-                    font-size: 12px !important;
-                }}
-            }}
-            /* حذف استایل‌های پیش‌فرض Streamlit */
-            .stRadio > div > label > div > div > div {{
-                border: none !important;
-                box-shadow: none !important;
-                outline: none !important;
-                background: transparent !important;
             }}
         </style>
         """,
@@ -838,27 +837,29 @@ def enhanced_likert_scale(question_data):
     # نمایش سوال
     st.markdown(f'<div class="likert-container"><div class="likert-question">{question}</div>', unsafe_allow_html=True)
     
-    # نمایش لیبل‌ها
-    st.markdown('<div class="likert-labels">', unsafe_allow_html=True)
-    st.markdown(f'<span style="text-align:right">{labels[0]}</span>', unsafe_allow_html=True)
-    
-    # دکمه‌ها با st.radio
-    options = [str(i) for i in range(1, scale + 1)]
-    symbols = ["○"] * scale
-    selected_index = options.index(str(st.session_state.get(key, 1))) if st.session_state.get(key) else 0
-    value = st.radio(
-        "",
-        options=options,
-        format_func=lambda x: "•" if options.index(x) == selected_index else "○",
-        key=f"radio-{key}",
-        index=selected_index,
-        horizontal=True
+    # نمایش لیبل‌ها و دکمه‌ها تو یه ردیف
+    st.markdown(
+        f'<div class="likert-labels"><span style="text-align:right">{labels[0]}</span>',
+        unsafe_allow_html=True
     )
-    st.session_state[key] = int(value)
-    
-    st.markdown('</div>', unsafe_allow_html=True)
-    st.markdown(f'<span style="text-align:left">{labels[1]}</span>', unsafe_allow_html=True)
+    st.markdown('<div class="likert-buttons">', unsafe_allow_html=True)
+    cols = st.columns(scale)
+    for i in range(scale):
+        with cols[i]:
+            value = scale - i  # 7 تا 1
+            symbol = "•" if st.session_state[key] == value else "○"
+            if st.button(
+                symbol,
+                key=f"streamlit-btn-{key}-{value}",
+                help=str(value)
+            ):
+                st.session_state[key] = value
+                st.rerun()
     st.markdown('</div>', unsafe_allow_html=True)
+    st.markdown(
+        f'<span style="text-align:left">{labels[1]}</span></div>',
+        unsafe_allow_html=True
+    )
     
     # نمایش پاسخ
     st.markdown(
@@ -868,9 +869,7 @@ def enhanced_likert_scale(question_data):
     
     st.markdown('</div>', unsafe_allow_html=True)
     
-    return st.session_state.get(key)
-  
-    
+    return st.session_state.get(key) 
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران