Update app.py

app.py

@@ -739,179 +739,120 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با خط فرضی، لیبل‌ها کنار، و نقاط دایره‌ای تو یه ردیف افقی"""
+    """لیکرت اسکیل با خط و نقاط - کاملاً واکنش‌گرا"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
     labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
     
-    # مقداردهی اولیه
     if key not in st.session_state:
         st.session_state[key] = None
-    
-    # استایل‌دهی سفارشی
-    st.markdown(
-        f"""
-        <style>
-            /* استایل کانتینر لیکرت */
-            .likert-container {{
-                font-family: 'B Nazanin', Arial, sans-serif !important;
-                direction: rtl !important;
-                text-align: center !important;
-                margin: 0 !important;
-                position: relative !important;
-            }}
-            .likert-question {{
-                font-size: 18px !important;
-                font-weight: bold !important;
-                margin-bottom: 15px !important;
-                color: #333333 !important;
-            }}
-            /* خط فرضی و لیبل‌ها */
-            .likert-line-container {{
-                position: relative !important;
-                width: 80% !important;
-                margin: 0 auto !important;
-                display: flex !important;
-                align-items: center !important;
-            }}
-            .likert-label-left {{
-                position: absolute !important;
-                left: -10% !important;
-                font-size: 14px !important;
-                color: #666666 !important;
-                text-align: right !important;
-            }}
-            .likert-label-right {{
-                position: absolute !important;
-                right: -10% !important;
-                font-size: 14px !important;
-                color: #666666 !important;
-                text-align: left !important;
-            }}
-            /* استایل دکمه‌ها */
-            .likert-buttons {{
-                display: flex !important;
-                justify-content: space-between !important;
-                gap: 10px !important;
-                flex-wrap: nowrap !important;
-                margin: 0 !important;
-                padding: 0 !important;
-                align-items: center !important;
-                width: 100% !important;
-            }}
-            div[data-testid="column"] {{
-                display: flex !important;
-                flex-wrap: nowrap !important;
-                min-width: 0 !important;
-                flex: 1 1 auto !important;
-            }}
-            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"] {{
-                width: 20px !important;
-                height: 20px !important;
-                border-radius: 50% !important;
-                background: white !important;
-                border: none !important;
-                color: black !important;
-                font-size: 14px !important;
-                padding: 0 !important;
-                margin: 0 auto !important;
-                box-shadow: none !important;
-                outline: none !important;
-                line-height: 1 !important;
-                display: flex !important;
-                align-items: center !important;
-                justify-content: center !important;
-            }}
-            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"]:hover {{
-                background: #e0e0e0 !important;
-            }}
-            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"]:focus,
-            div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"]:active {{
-                background: black !important;
-                color: white !important;
-            }}
-            /* استایل دکمه انتخاب‌شده */
-            div[data-testid="stButton"] > button[key="streamlit-btn-{key}-{st.session_state[key] if st.session_state[key] else 'none'}"] {{
-                background: black !important;
-                color: white !important;
-            }}
-            /* ریسپانسیو کردن */
-            @media (max-width: 600px) {{
-                .likert-line-container {{
-                    width: 90% !important;
-                }}
-                .likert-label-left {{
-                    left: -5% !important;
-                    font-size: 12px !important;
-                }}
-                .likert-label-right {{
-                    right: -5% !important;
-                    font-size: 12px !important;
-                }}
-                .likert-buttons {{
-                    gap: 5px !important;
-                }}
-                div[data-testid="stButton"] > button[key^="streamlit-btn-{key}-"] {{
-                    width: 18px !important;
-                    height: 18px !important;
-                    font-size: 12px !important;
-                }}
-                div[data-testid="column"] {{
-                    display: flex !important;
-                    flex-wrap: nowrap !important;
-                    min-width: 0 !important;
-                    flex: 1 1 auto !important;
-                }}
+
+    # نمایش سوال
+    st.markdown(f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{question}</div>", 
+                unsafe_allow_html=True)
+
+    # ایجاد خط و نقاط با HTML/CSS
+    scale_html = f"""
+    <style>
+        .likert-line {{
+            width: 80%;
+            height: 2px;
+            background: #6a0dad;
+            margin: 0 auto;
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+        }}
+        .likert-dot {{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: white;
+            border: 2px solid #6a0dad;
+            position: relative;
+            top: -9px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }}
+        .likert-dot.selected {{
+            background: #6a0dad;
+        }}
+        .likert-labels {{
+            width: 80%;
+            margin: 5px auto 20px;
+            display: flex;
+            justify-content: space-between;
+            direction: rtl;
+        }}
+        .likert-value {{
+            text-align: center;
+            margin-top: 10px;
+            color: #6a0dad;
+            font-weight: bold;
+        }}
+        @media (max-width: 768px) {{
+            .likert-line {{
+                width: 90%;
             }}
-            /* حذف استایل‌های پیش‌فرض Streamlit */
-            div[data-testid="stButton"] > button {{
-                border: none !important;
-                box-shadow: none !important;
-                outline: none !important;
-                background: transparent !important;
+            .likert-labels {{
+                width: 90%;
             }}
-        </style>
-        """,
-        unsafe_allow_html=True
-    )
+        }}
+    </style>
     
-    # نمایش سوال
-    st.markdown(f'<div class="likert-container"><div class="likert-question">{question}</div>', unsafe_allow_html=True)
+    <div class='likert-container'>
+        <div class='likert-labels'>
+            <span>{labels[1]}</span>
+            <span>{labels[0]}</span>
+        </div>
+        <div class='likert-line'>
+    """
+
+    # اضافه کردن نقاط
+    for i in range(scale):
+        value = scale - i
+        is_selected = st.session_state.get(key) == value
+        scale_html += f"<div class='likert-dot {'selected' if is_selected else ''}' onclick='setLikertValue({value})'></div>"
     
-    # خط فرضی، لیبل‌ها، و دکمه‌ها
-    st.markdown(
-        f'<div class="likert-line-container">'
-        f'<span class="likert-label-left">{labels[0]}</span>'
-        f'<span class="likert-label-right">{labels[1]}</span>'
-        f'<div class="likert-buttons">',
-        unsafe_allow_html=True
-    )
+    scale_html += "</div>"
     
-    # دکمه‌ها تو یه ردیف
-    cols = st.columns(scale)
+    # نمایش مقدار انتخاب شده
+    if st.session_state.get(key):
+        scale_html += f"<div class='likert-value'>پاسخ شما: {st.session_state[key]}</div>"
+    
+    scale_html += "</div>"
+    
+    # تزریق JavaScript برای مدیریت کلیک
+    components.html(scale_html + """
+    <script>
+    function setLikertValue(value) {
+        const streamlitDoc = window.parent.document;
+        const buttons = streamlitDoc.querySelectorAll('button[data-testid="baseButton-secondary"]');
+        buttons.forEach(btn => {
+            if (btn.textContent.trim() === String(value)) {
+                btn.click();
+            }
+        });
+    }
+    </script>
+    """, height=80)
+
+    # دکمه‌های واقعی (مخفی)
+    btn_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 "○"
+        with btn_cols[i]:
+            value = scale - i
             if st.button(
-                symbol,
-                key=f"streamlit-btn-{key}-{value}",
-                help=str(value)
+                str(value),
+                key=f"{key}_btn_{value}",
+                type="primary" if st.session_state.get(key) == value else "secondary"
             ):
                 st.session_state[key] = value
                 st.rerun()
-    
-    st.markdown('</div></div>', unsafe_allow_html=True)
-    
-    # نمایش پاسخ
-    st.markdown(
-        f'<div class="likert-response">پاسخ شما: {st.session_state[key] or "هیچکدام"}</div>',
-        unsafe_allow_html=True
-    )
-    
-    st.markdown('</div>', unsafe_allow_html=True)
-    
+
     return st.session_state.get(key)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""