Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با استایل HTML و منطق Streamlit"""
+    """لیکرت اسکیل با دکمه‌های کاملاً HTML و منطق Streamlit"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -749,75 +749,117 @@ def enhanced_likert_scale(question_data):
     if key not in st.session_state:
         st.session_state[key] = None
     
-    # استایل‌دهی با HTML - غیرفعال کردن استایل‌های پیش‌فرض دکمه‌ها
-    st.markdown(f"""
+    # استایل‌دهی و ساختار HTML
+    html_content = f"""
     <style>
-        /* غیرفعال کردن کامل تمام استایل‌های قبلی فقط برای دکمه‌های لیکرت */
-        div[data-testid="column"] .stButton > button {{
-            all: unset !important;
-            min-height: 0 !important;
-            padding: 0 !important;
-            margin: 0 !important;
-            border-radius: 0 !important;
-            box-shadow: none !important;
-            background: none !important;
-            border: none !important;
-            color: inherit !important;
-            font: inherit !important;
+        /* استایل‌های کانتینر لیکرت */
+        .likert-container {{
+            font-family: 'B Nazanin', Arial, sans-serif !important;
+            direction: rtl !important;
+            text-align: center !important;
+            margin: 20px 0 !important;
+        }}
+        .likert-question {{
+            font-size: 18px !important;
+            font-weight: bold !important;
+            margin-bottom: 15px !important;
+            color: #333333 !important;
+        }}
+        .likert-labels {{
+            display: flex !important;
+            justify-content: space-between !important;
+            font-size: 14px !important;
+            margin-bottom: 10px !important;
+            color: #666666 !important;
+        }}
+        .likert-buttons {{
+            display: flex !important;
+            justify-content: center !important;
+            gap: 8px !important;
+            flex-wrap: wrap !important;
+            margin: 10px 0 !important;
+        }}
+        /* استایل دکمه‌های لیکرت */
+        .likert-btn {{
+            width: 40px !important;
+            height: 40px !important;
+            border-radius: 50% !important;
+            border: 2px solid #6a0dad !important;
+            background: white !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;
             cursor: pointer !important;
+            transition: all 0.3s ease !important;
+            font-size:金属
+            color: #6a0dad !important;
         }}
-        
-        /* حذف افکت‌های hover و active پیشفرض */
-        div[data-testid="column"] .stButton > button:hover,
-        div[data-testid="column"] .stButton > button:active,
-        div[data-testid="column"] .stButton > button:focus {{
-            background: none !important;
-            border: none !important;
-            box-shadow: none !important;
-            transform: none !important;
+        .likert-btn.selected {{
+            background: #6a0dad !important;
+            color: white !important;
+            box-shadow: 0 0 10px rgba(106, 13, 173, 0.5) !important;
         }}
-        
-        /* مخفی کردن label دکمه‌ها */
-        div[data-testid="column"] .stButton > button > div > p {{
-            display: none !important;
+        .likert-btn:hover {{
+            background: #f0e6ff !important;
+            transform: scale(1.1) !important;
+        }}
+        /* استایل پاسخ انتخاب‌شده */
+        .likert-response {{
+            text-align: center !important;
+            color: #6a0dad !important;
+            font-weight: bold !important;
+            margin-top: 10px !important;
+            font-size: 16px !important;
         }}
     </style>
-    """, unsafe_allow_html=True)
+    <div class="likert-container">
+        <div class="likert-question">{question}</div>
+        <div class="likert-labels">
+            <span style="text-align:right">{labels[0]}</span>
+            <span style="text-align:left">{labels[1]}</span>
+        </div>
+        <div class="likert-buttons">
+    """
+    
+    # افزودن دکمه‌های HTML
+    for i in range(scale):
+        value = scale - i  # 7 تا 1
+        is_selected = st.session_state.get(key) == value
+        html_content += f"""
+            <button class="likert-btn {'selected' if is_selected else ''}"
+                    onclick="document.getElementById('hidden-btn-{key}-{value}').click()">
+                {'•' if is_selected else '○'}
+            </button>
+        """
     
-    # نمایش سوال
-    st.markdown(f"**{question}**")
+    html_content += """
+        </div>
+    </div>
+    """
     
-    # نمایش برچسب‌ها
-    col1, col2 = st.columns(2)
-    with col1:
-        st.markdown(f"<div style='text-align:right'>{labels[0]}</div>", unsafe_allow_html=True)
-    with col2:
-        st.markdown(f"<div style='text-align:left'>{labels[1]}</div>", unsafe_allow_html=True)
+    # رندر HTML
+    components.html(html_content, height=200)
     
-    # ایجاد دکمه‌ها با استفاده از st.columns
-    btn_cols = st.columns(scale)
+    # ایجاد دکمه‌های مخفی Streamlit برای مدیریت کلیک‌ها
     for i in range(scale):
-        with btn_cols[i]:
-            value = scale - i  # 7 تا 1
-            is_selected = st.session_state.get(key) == value
-            
-            # نمایش دکمه‌های ساده بدون استایل
-            if st.button(
-                "•" if is_selected else "○",
-                key=f"{key}_btn_{value}",
-                on_click=lambda v=value: st.session_state.update({key: v})
-            ):
-                st.session_state[key] = value
-                st.rerun()
+        value = scale - i
+        if st.button(
+            "hidden",
+            key=f"hidden-btn-{key}-{value}",
+            help=str(value),
+            type="secondary",
+            use_container_width=True
+        ):
+            st.session_state[key] = value
+            st.rerun()
     
-    # نمایش پاسخ انتخاب شده
+    # نمایش پاسخ انتخاب‌شده
     if st.session_state.get(key) is not None:
-        st.markdown(
-            f"<div style='text-align:center; color:#6a0dad; font-weight:bold; margin-top:10px;'>"
-            f"پاسخ شما: {st.session_state[key]}"
-            f"</div>",
-            unsafe_allow_html=True
-        )
+        st.markdown(f"""
+        <div class="likert-response">
+            پاسخ شما: {st.session_state[key]}
+        </div>
+        """, unsafe_allow_html=True)
     
     return st.session_state.get(key)