Update app.py

app.py

@@ -774,7 +774,7 @@ body, .stApp {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های سفارشی و مدیریت انتخاب با st.button"""
+    """لیکرت اسکیل با st.radio و استایل ساده"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -788,42 +788,34 @@ def enhanced_likert_scale(question_data):
     st.markdown(f"<div style='text-align:right; font-weight:bold; margin-bottom:15px; direction: rtl;'>{question}</div>", 
                 unsafe_allow_html=True)
 
-    # تنظیم چیدمان مرکزی با ستون‌ها
-    total_cols = scale + 2  # یک ستون برای هر نقطه + 2 ستون برای برچسب‌ها
-    col_widths = [1] * 2 + [2] * scale  # 2 ستون برای برچسب‌ها (هر کدام 1) و نقاط (هر کدام 2)
-    cols = st.columns(col_widths)
-
-    # نمایش برچسب سمت راست
-    with cols[0]:
-        st.markdown(f"<div style='text-align:right; font-size:14px; font-weight:bold; color:#6a0dad; direction: rtl;'>{labels[0]}</div>", 
-                    unsafe_allow_html=True)
+    # نمایش برچسب‌ها
+    st.markdown(
+        f"""
+        <div style='display: flex; justify-content: space-between; max-width: 475px; margin: 0 auto; direction: rtl;'>
+            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>{labels[0]}</span>
+            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>{labels[1]}</span>
+        </div>
+        """,
+        unsafe_allow_html=True
+    )
 
-    # نمایش دکمه‌های سفارشی
+    # تنظیم چیدمان با st.radio
     options = list(range(1, scale + 1))
-    selected_value = st.session_state.get(key, 0)
+    current_value = st.session_state.get(key, 0)
     
-    for i, value in enumerate(options):
-        with cols[i + 2]:  # شروع از ستون دوم (پس از برچسب‌ها)
-            button_key = f"{key}_dot_{value}"
-            is_selected = selected_value == value
-            button_style = "background: #6a0dad; border: 2px solid #6a0dad;" if is_selected else "background: white; border: 2px solid #6a0dad;"
-            st.markdown(
-                f"""
-                <div style='text-align: center;'>
-                    <button style='width: 18px; height: 18px; border-radius: 50%; {button_style} padding: 0; cursor: pointer; border: none;'
-                            id='{button_key}' onclick='this.blur();'>
-                    </button>
-                </div>
-                """,
-                unsafe_allow_html=True
-            )
-            if st.button("", key=button_key, help=f"Select value {value}", disabled=False):
-                st.session_state[key] = value
-
-    # نمایش برچسب سمت چپ
-    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)
+    # استفاده از st.radio
+    selected_value = st.radio(
+        "",
+        options=options,
+        index=current_value - 1 if current_value > 0 else None,
+        label_visibility="collapsed",
+        horizontal=True,
+        key=f"{key}_radio"
+    )
+
+    # به‌روزرسانی st.session_state
+    if selected_value is not None and selected_value != current_value:
+        st.session_state[key] = selected_value
 
     # نمایش پاسخ انتخاب‌شده
     if st.session_state[key] != 0:
@@ -833,37 +825,58 @@ 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 {
-            width: 80%;
-            height: 2px;
-            background: #6a0dad;
-            margin: 20px auto;
-            direction: rtl;
-        }
-        /* اجبار به چیدمان افقی در موبایل */
-        @media (max-width: 768px) {
+    # خط جداکننده و استایل سفارشی
+    st.markdown(
+        """
+        <style>
             .likert-separator {
-                width: 90%;
+                width: 80%;
+                height: 2px;
+                background: #6a0dad;
+                margin: 20px auto;
+                direction: rtl;
             }
-        }
-        /* تنظیم مرکزیت در فریم موبایل (475px) */
-        @media (min-width: 768px) {
-            [data-testid="stAppViewContainer"] [data-testid="stHorizontalBlock"] {
-                justify-content: center !important;
-                width: 475px !important;
-                margin: 0 auto !important;
+            /* تنظیم استایل دکمه‌های رادیویی */
+            [data-testid="stRadio"] > div {
+                display: flex;
+                justify-content: space-between;
+                max-width: 475px;
+                margin: 0 auto;
+                padding: 0;
+                background: #6a0dad;
+                height: 2px;
+                align-items: center;
             }
-        }
-        /* مخفی کردن دکمه‌های پیش‌فرض Streamlit برای انتخاب */
-        [data-testid="stButton"][help] {
-            display: none !important;
-        }
-    </style>
-    <div class="likert-separator"></div>
-    """, unsafe_allow_html=True)
+            [data-testid="stRadio"] input[type="radio"] {
+                display: none;
+            }
+            [data-testid="stRadio"] label {
+                width: 18px !important;
+                height: 18px !important;
+                border-radius: 50% !important;
+                background: white !important;
+                border: 2px solid #6a0dad !important;
+                margin: 0 !important;
+                position: relative;
+                top: -9px;
+                cursor: pointer;
+            }
+            [data-testid="stRadio"] input[type="radio"]:checked + label {
+                background: #6a0dad !important;
+            }
+            @media (max-width: 768px) {
+                .likert-separator {
+                    width: 90%;
+                }
+                [data-testid="stRadio"] > div {
+                    width: 90%;
+                }
+            }
+        </style>
+        <div class="likert-separator"></div>
+        """,
+        unsafe_allow_html=True
+    )
 
     return st.session_state.get(key)