Update app.py

app.py

@@ -774,7 +774,7 @@ body, .stApp {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با HTML/CSS ساده و مدیریت انتخاب با st.session_state"""
+    """لیکرت اسکیل با دکمه‌های سفارشی و مدیریت انتخاب با st.button"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -788,121 +788,42 @@ 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)
 
-    # HTML و CSS برای نمایش خط و نقاط
-    current_value = st.session_state.get(key, 0)
-    scale_html = f"""
-    <style>
-        @font-face {{
-            font-family: 'B Nazanin';
-            src: url('https://www.fontyab.com/fonts/b-nazanin/BNazanin.woff2') format('woff2');
-        }}
-        .likert-container {{
-            max-width: 475px;
-            margin: 0 auto;
-            direction: rtl;
-            text-align: center;
-        }}
-        .likert-line {{
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 2px;
-            background: #6a0dad;
-            position: relative;
-        }}
-        .likert-dot {{
-            width: 18px;
-            height: 18px;
-            border-radius: 50%;
-            background: white;
-            border: 2px solid #6a0dad;
-            cursor: pointer;
-            position: relative;
-            top: -9px;
-            transition: background-color 0.1s;
-        }}
-        .likert-dot.active {{
-            background: #6a0dad;
-        }}
-        .likert-labels {{
-            display: flex;
-            justify-content: space-between;
-            font-size: 14px;
-            font-family: 'B Nazanin', sans-serif;
-            font-weight: bold;
-            color: #6a0dad;
-            margin: 5px 0 15px;
-        }}
-        @media (max-width: 768px) {{
-            .likert-container {{
-                width: 90%;
-            }}
-            .likert-line {{
-                width: 100%;
-            }}
-            .likert-labels {{
-                width: 100%;
-            }}
-        }}
-    </style>
-    
-    <div class="likert-container">
-        <div class="likert-labels">
-            <span>{labels[0]}</span>
-            <span>{labels[1]}</span>
-        </div>
-        <div class="likert-line">
-    """
-
-    # اضافه کردن نقاط
-    for i in range(1, scale + 1):
-        value = i
-        active_class = "active" if current_value == value else ""
-        scale_html += f"""
-        <div class='likert-dot {active_class}' id='dot-{key}-{value}'
-             onclick='this.closest("form").querySelector(`input[value="${{value}}"]').checked = true; this.closest("form").querySelector("button[type=submit]").click();'>
-        </div>
-        """
+    # تنظیم چیدمان مرکزی با ستون‌ها
+    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)
+
+    # نمایش دکمه‌های سفارشی
+    options = list(range(1, scale + 1))
+    selected_value = st.session_state.get(key, 0)
     
-    scale_html += "</div></div>"
-
-    # فرم برای ثبت انتخاب
-    with st.form(key=f"{key}_form", clear_on_submit=True):
-        scale_html += f"""
-        <input type="radio" name="likert_radio" value="1" style="display: none;" {"checked" if current_value == 1 else ""}>
-        """
-        for i in range(2, scale + 1):
-            value = i
-            scale_html += f"""
-            <input type="radio" name="likert_radio" value="{value}" style="display: none;" {"checked" if current_value == value else ""}>
-            """
-        scale_html += '<button type="submit" style="display: none;">Submit</button>'
-        components.html(scale_html, height=60)
-
-        selected_option = st.radio(
-            "",
-            options=list(range(1, scale + 1)),
-            index=current_value - 1 if current_value > 0 else None,
-            label_visibility="collapsed",
-            key=f"{key}_radio"
-        )
-        if st.form_submit_button("ثبت", use_container_width=True):
-            st.session_state[key] = selected_option
-
-    # جاوااسکریپت برای به‌روزرسانی ظاهر نقاط
-    st.markdown(
-        f"""
-        <script>
-            document.querySelectorAll('.likert-dot').forEach(dot => {{
-                dot.addEventListener('click', function() {{
-                    document.querySelectorAll('.likert-dot').forEach(d => d.classList.remove('active'));
-                    this.classList.add('active');
-                }});
-            }});
-        </script>
-        """,
-        unsafe_allow_html=True
-    )
+    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)
 
     # نمایش پاسخ انتخاب‌شده
     if st.session_state[key] != 0:
@@ -912,7 +833,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 {
@@ -922,17 +843,22 @@ def enhanced_likert_scale(question_data):
             margin: 20px auto;
             direction: rtl;
         }
+        /* اجبار به چیدمان افقی در موبایل */
         @media (max-width: 768px) {
             .likert-separator {
                 width: 90%;
             }
         }
-        /* مخفی کردن دکمه‌های رادیویی پیش‌فرض Streamlit */
-        [data-testid="stRadio"] > div {
-            display: none !important;
+        /* تنظیم مرکزیت در فریم موبایل (475px) */
+        @media (min-width: 768px) {
+            [data-testid="stAppViewContainer"] [data-testid="stHorizontalBlock"] {
+                justify-content: center !important;
+                width: 475px !important;
+                margin: 0 auto !important;
+            }
         }
-        /* مخفی کردن دکمه ثبت */
-        [data-testid="stFormSubmitButton"] {
+        /* مخفی کردن دکمه‌های پیش‌فرض Streamlit برای انتخاب */
+        [data-testid="stButton"][help] {
             display: none !important;
         }
     </style>