Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های HTML دقیقاً روی دکمه‌های Streamlit نامرئی"""
+    """لیکرت اسکیل با دکمه‌های Streamlit مخفی دقیقاً زیر دکمه‌های HTML"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -757,7 +757,7 @@ def enhanced_likert_scale(question_data):
             font-family: 'B Nazanin', Arial, sans-serif !important;
             direction: rtl !important;
             text-align: center !important;
-            margin: 20px 0 !important;
+            margin: 0 !important;
             position: relative !important;
         }}
         .likert-question {{
@@ -777,7 +777,6 @@ def enhanced_likert_scale(question_data):
             display: flex !important;
             justify-content: center !important;
             gap: 8px !important;
-            flex-wrap: wrap !important;
             margin: 0 !important;
             position: relative !important;
             height: 40px !important;
@@ -878,6 +877,15 @@ def enhanced_likert_scale(question_data):
             پاسخ شما: {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>
     """
     
     # رندر HTML
@@ -891,29 +899,35 @@ def enhanced_likert_scale(question_data):
             # کانتینر برای دکمه Streamlit
             st.markdown(
                 f"""
-                <div class="likert-streamlit-btn-container">
-                    <style>
-                        #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>
+                <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
             )
@@ -924,6 +938,15 @@ def enhanced_likert_scale(question_data):
                 type="secondary"
             ):
                 st.session_state[key] = value
+                # آپدیت دکمه‌های HTML با JavaScript
+                st.markdown(
+                    f"""
+                    <script>
+                        updateLikertSelection('{key}', {value});
+                    </script>
+                    """,
+                    unsafe_allow_html=True
+                )
                 st.rerun()
     
     return st.session_state.get(key)