Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های Streamlit مخفی دقیقاً زیر دکمه‌های HTML"""
+    """لیکرت اسکیل فقط با فیچرهای Streamlit و دکمه‌های دایره‌ای ریسپانسیو"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -749,204 +749,126 @@ def enhanced_likert_scale(question_data):
     if key not in st.session_state:
         st.session_state[key] = None
     
-    # استایل‌دهی و ساختار HTML
-    html_content = 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-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;
-            margin: 0 !important;
-            padding: 0 !important;
-            position: relative !important;
-            height: 40px !important;
-        }}
-        /* استایل دکمه‌های لیکرت (HTML) */
-        .likert-btn {{
-            position: absolute !important;
-            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: 18px !important;
-            color: #6a0dad !important;
-            z-index: 1000 !important;
-        }}
-        .likert-btn.selected {{
-            background: #6a0dad !important;
-            color: white !important;
-            box-shadow: 0 0 10px rgba(106, 13, 173, 0.5) !important;
-        }}
-        .likert-btn:hover {{
-            background: #f0e6ff !important;
-            transform: scale(1.1) !important;
-        }}
-        /* مخفی کردن دکمه‌های Streamlit */
-        .likert-streamlit-btn-container {{
-            position: relative !important;
-            width: 40px !important;
-            height: 40px !important;
-            margin: 0 !important;
-            padding: 0 !important;
-        }}
-        .likert-streamlit-btn {{
-            width: 40px !important;
-            height: 40px !important;
-            opacity: 0 !important;
-            position: absolute !important;
-            top: 0 !important;
-            left: 0 !important;
-            margin: 0 !important;
-            padding: 0 !important;
-            border: none !important;
-            background: white !important;
-            z-index: 1 !important;
-        }}
-        .likert-streamlit-btn:hover,
-        .likert-streamlit-btn:focus,
-        .likert-streamlit-btn:active {{
-            border: none !important;
-            background: white !important;
-        }}
-        /* استایل پاسخ انتخاب‌شده */
-        .likert-response {{
-            text-align: center !important;
-            color: #6a0dad !important;
-            font-weight: bold !important;
-            margin-top: 10px !important;
-            font-size: 16px !important;
-        }}
-    </style>
-    <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" id="likert-buttons-{key}">
-    """
+    # استایل‌دهی سفارشی برای دکمه‌های Streamlit
+    st.markdown(
+        f"""
+        <style>
+            /* استایل کانتینر لیکرت */
+            .likert-container {{
+                font-family: 'B Nazanin', Arial, sans-serif !important;
+                direction: rtl !important;
+                text-align: center !important;
+                margin: 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: 0 !important;
+                padding: 0 !important;
+            }}
+            /* استایل دکمه‌های Streamlit */
+            div.stButton > button[key^="streamlit-btn-{key}-"] {{
+                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;
+                font-size: 18px !important;
+                color: #6a0dad !important;
+                padding: 0 !important;
+                margin: 0 !important;
+                transition: all 0.3s ease !important;
+            }}
+            div.stButton > button[key^="streamlit-btn-{key}-"]:hover {{
+                background: #f0e6ff !important;
+                transform: scale(1.1) !important;
+            }}
+            div.stButton > button[key^="streamlit-btn-{key}-"]:focus,
+            div.stButton > button[key^="streamlit-btn-{key}-"]:active {{
+                background: #6a0dad !important;
+                color: white !important;
+                box-shadow: 0 0 10px rgba(106, 13, 173, 0.5) !important;
+            }}
+            /* استایل دکمه انتخاب‌شده */
+            div.stButton > button[key="streamlit-btn-{key}-{st.session_state[key] if st.session_state[key] else 'none'}"] {{
+                background: #6a0dad !important;
+                color: white !important;
+                box-shadow: 0 0 10px rgba(106, 13, 173, 0.5) !important;
+            }}
+            /* استایل پاسخ */
+            .likert-response {{
+                text-align: center !important;
+                color: #6a0dad !important;
+                font-weight: bold !important;
+                margin-top: 10px !important;
+                font-size: 16px !important;
+            }}
+            /* ریسپانسیو کردن */
+            @media (max-width: 600px) {{
+                .likert-buttons {{
+                    gap: 4px !important;
+                }}
+                div.stButton > button[key^="streamlit-btn-{key}-"] {{
+                    width: 36px !important;
+                    height: 36px !important;
+                    font-size: 16px !important;
+                }}
+            }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
     
-    # محاسبه موقعیت دکمه‌ها
-    button_width = 40
-    gap = 8
-    total_width = scale * button_width + (scale - 1) * gap
-    start_x = -total_width / 2  # برای وسط‌چین کردن دکمه‌ها
+    # نمایش سوال
+    st.markdown(f'<div class="likert-container"><div class="likert-question">{question}</div>', unsafe_allow_html=True)
     
-    # افزودن دکمه‌های HTML
-    for i in range(scale):
-        value = scale - i  # 7 تا 1
-        is_selected = st.session_state[key] == value
-        x_position = start_x + i * (button_width + gap)
-        html_content += f"""
-            <button class="likert-btn {'selected' if is_selected else ''}"
-                    style="left: calc(50% + {x_position}px); top: 0;"
-                    onclick="document.getElementById('streamlit-btn-{key}-{value}').click()">
-                {'•' if is_selected else '○'}
-            </button>
-        """
+    # نمایش لیبل‌ها
+    st.markdown(
+        f'<div class="likert-labels"><span style="text-align:right">{labels[0]}</span><span style="text-align:left">{labels[1]}</span></div>',
+        unsafe_allow_html=True
+    )
     
-    html_content += f"""
-        </div>
-        <div class="likert-response" id="likert-response-{key}">
-            پاسخ شما: {st.session_state[key] or "هیچکدام"}
-        </div>
-    </div>
-    <script>
-        function updateLikertSelection(key, value) {{
-            const buttons = document.querySelectorAll('#likert-buttons-{key} .likert-btn');
-            buttons.forEach(btn => btn.classList.remove('selected'));
-            const selectedBtn = Array.from(buttons).find(btn => btn.onclick.toString().includes('streamlit-btn-{key}-' + value));
-            if (selectedBtn) selectedBtn.classList.add('selected');
-            document.getElementById('likert-response-{key}').innerText = 'پاسخ شما: ' + (value || '��یچکدام');
-        }}
-    </script>
-    """
+    # نمایش دکمه‌ها در یک ردیف
+    st.markdown('<div class="likert-buttons">', unsafe_allow_html=True)
+    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 "○"
+            if st.button(
+                symbol,
+                key=f"streamlit-btn-{key}-{value}",
+                help=str(value)
+            ):
+                st.session_state[key] = value
+                st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    # رندر HTML
-    components.html(html_content, height=150)
+    # نمایش پاسخ
+    st.markdown(
+        f'<div class="likert-response">پاسخ شما: {st.session_state[key] or "هیچکدام"}</div>',
+        unsafe_allow_html=True
+    )
     
-    # ایجاد دکمه‌های Streamlit
-    st.markdown('<div style="display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0;">', unsafe_allow_html=True)
-    for i in range(scale):
-        value = scale - i  # 7 تا 1
-        st.markdown(
-            f"""
-            <style>
-                .likert-streamlit-btn-container-{key}-{value} {{
-                    position: relative !important;
-                    width: 40px !important;
-                    height: 40px !important;
-                    margin: 0 !important;
-                    padding: 0 !important;
-                }}
-                #streamlit-btn-{key}-{value} {{
-                    width: 40px !important;
-                    height: 40px !important;
-                    opacity: 0 !important;
-                    position: absolute !important;
-                    top: 0 !important;
-                    left: 0 !important;
-                    margin: 0 !important;
-                    padding: 0 !important;
-                    border: none !important;
-                    background: white !important;
-                    z-index: 1 !important;
-                }}
-                #streamlit-btn-{key}-{value}:hover,
-                #streamlit-btn-{key}-{value}:focus,
-                #streamlit-btn-{key}-{value}:active {{
-                    border: none !important;
-                    background: white !important;
-                }}
-            </style>
-            <div class="likert-streamlit-btn-container-{key}-{value}"></div>
-            """,
-            unsafe_allow_html=True
-        )
-        if st.button(
-            "•" if st.session_state[key] == value else "○",
-            key=f"streamlit-btn-{key}-{value}",
-            help=str(value),
-            type="secondary"
-        ):
-            st.session_state[key] = value
-            # آپدیت دکمه‌های HTML با JavaScript
-            st.markdown(
-                f"""
-                <script>
-                    updateLikertSelection('{key}', {value});
-                </script>
-                """,
-                unsafe_allow_html=True
-            )
-            st.rerun()
     st.markdown('</div>', unsafe_allow_html=True)
     
     return st.session_state.get(key)