Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با استایل‌های بهینه‌شده"""
+    """لیکرت اسکیل با استایل‌های بهینه‌شده در HTML"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -749,71 +749,77 @@ def enhanced_likert_scale(question_data):
     if key not in st.session_state:
         st.session_state[key] = None
     
-    # استایل‌دهی پیشرفته
-    st.markdown(f"""
+    # استایل‌دهی با HTML و CSS
+    html_styles = f"""
     <style>
-        /* بازنشانی کامل استایل‌های دکمه */
-        div[data-testid="stHorizontalBlock"] {{
-            all: unset !important;
-            display: flex !important;
-            justify-content: center !important;
-            gap: 8px !important;
-            flex-wrap: wrap !important;
-            margin: 10px 0 !important;
+        /* بازنشانی استایل‌های پیش‌فرض */
+        .likert-container {{
+            font-family: 'Arial', sans-serif;
+            direction: rtl;
+            text-align: center;
+            margin: 20px 0;
         }}
-        div[data-testid="column"] {{
-            all: unset !important;
-            flex: 1 !important;
-            min-width: 0 !important;
+        .likert-question {{
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 15px;
         }}
-        button[data-testid="baseButton-{key}"] {{
-            all: unset !important;
-            width: 32px !important;
-            height: 32px !important;
-            border-radius: 50% !important;
-            border: 2px solid #6a0dad !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-            margin: 0 !important;
-            padding: 0 !important;
-            cursor: pointer !important;
+        .likert-labels {{
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            margin-bottom: 10px;
         }}
-        button[data-testid="baseButton-{key}"][kind="secondary"] {{
-            background: white !important;
+        .likert-buttons {{
+            display: flex;
+            justify-content: center;
+            gap: 8px;
+            flex-wrap: wrap;
+            margin: 10px 0;
         }}
-        button[data-testid="baseButton-{key}"][kind="primary"] {{
-            background: #6a0dad !important;
+        .likert-btn {{
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: 2px solid #6a0dad;
+            background: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 0;
+            transition: all 0.2s ease;
         }}
-        button[data-testid="baseButton-{key}"] > div > p {{
-            display: none !important;
+        .likert-btn.selected {{
+            background: #6a0dad;
         }}
-        button[data-testid="baseButton-{key}"]:after {{
-            content: "○";
-            color: #6a0dad;
+        .likert-btn.selected::after {{
+            content: '•';
+            color: white;
             font-size: 18px;
         }}
-        button[data-testid="baseButton-{key}"][kind="primary"]:after {{
-            content: "•";
-            color: white;
+        .likert-btn:not(.selected)::after {{
+            content: '○';
+            color: #6a0dad;
+            font-size: 18px;
         }}
     </style>
-    """, unsafe_allow_html=True)
+    """
+    components.html(html_styles, height=0)  # رندر استایل‌ها بدون ارتفاع
     
     # نمایش سوال
     st.markdown(f"""
-    <div style='text-align:center; font-family:"B Nazanin"; 
-                font-size:18px; font-weight:bold; margin-bottom:15px;'>
-        {question}
+    <div class="likert-container">
+        <div class="likert-question">{question}</div>
     </div>
     """, unsafe_allow_html=True)
     
     # نمایش برچسب‌ها
     label_cols = st.columns([1, scale-2, 1])
     with label_cols[0]:
-        st.markdown(f"<div style='text-align:right;'>{labels[1]}</div>", unsafe_allow_html=True)
+        st.markdown(f"<div class='likert-labels' style='text-align:right;'>{labels[1]}</div>", unsafe_allow_html=True)
     with label_cols[-1]:
-        st.markdown(f"<div style='text-align:left;'>{labels[0]}</div>", unsafe_allow_html=True)
+        st.markdown(f"<div class='likert-labels' style='text-align:left;'>{labels[0]}</div>", unsafe_allow_html=True)
     
     # ایجاد دکمه‌های گرد (7 تا 1 از راست به چپ)
     btn_cols = st.columns(scale)
@@ -823,11 +829,22 @@ def enhanced_likert_scale(question_data):
             is_selected = st.session_state.get(key) == value
             btn_type = "primary" if is_selected else "secondary"
             
+            # استفاده از HTML برای دکمه‌ها به جای استایل مستقیم Streamlit
+            st.markdown(f"""
+            <div class="likert-buttons">
+                <button class="likert-btn {'selected' if is_selected else ''}"
+                        onclick="this.form.submit()"
+                        {'disabled' if is_selected else ''}>
+                </button>
+            </div>
+            """, unsafe_allow_html=True)
+            
             if st.button(
                 str(value),
                 key=f"{key}_btn_{value}",
                 type=btn_type,
-                on_click=lambda v=value: st.session_state.update({key: v})
+                on_click=lambda v=value: st.session_state.update({key: v}),
+                help=str(value)  # برای دسترسی آسان‌تر
             ):
                 st.session_state[key] = value
                 st.rerun()