Update app.py

app.py

@@ -738,33 +738,23 @@ h3 {
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
+
 def enhanced_likert_scale(question_data):
     """لیکرت اسکیل با خط و نقاط - کاملاً واکنش‌گرا"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
-    labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
-
+    labels = question_data.get("labels", \["کاملاً مخالفم", "کاملاً موافقم"])
+    
+    ```
     if key not in st.session_state:
         st.session_state[key] = None
-
+    
     # نمایش سوال
     st.markdown(f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{question}</div>", 
                 unsafe_allow_html=True)
-
-    # ایجاد سلکت باکس برای انتخاب گزینه‌ها
-    selected_value = st.selectbox(
-        "لطفاً یک گزینه را انتخاب کنید:",
-        options=range(1, scale+1),  # گزینه‌ها از 1 تا scale
-        index=st.session_state.get(key) - 1 if st.session_state.get(key) else 0,  # پیش‌فرض انتخاب شده
-        key=f"select_{key}",
-        format_func=lambda x: labels[x-1]  # برچسب‌ها برای هر گزینه
-    )
-
-    # ذخیره انتخاب کاربر
-    st.session_state[key] = selected_value
-
-    # نمایش خط و دکمه‌ها با HTML/CSS
+    
+    # ایجاد خط و نقاط با HTML/CSS
     scale_html = f"""
     <style>
         .likert-line {{
@@ -822,28 +812,60 @@ def enhanced_likert_scale(question_data):
             }}
         }}
     </style>
+    
+    <div class='likert-container'>
+        <div class='likert-labels'>
+            <span>{labels[1]}</span>
+            <span>{labels[0]}</span>
+        </div>
+        <div class='likert-line'>
     """
 
+    # اضافه کردن نقاط
+    for i in range(scale):
+        value = scale - i
+        is_selected = st.session_state.get(key) == value
+        scale_html += f"<div class='likert-dot {'selected' if is_selected else ''}' onclick='setLikertValue({value})'></div>"
+    
+    scale_html += "</div>"
+    
     # نمایش مقدار انتخاب شده
     if st.session_state.get(key):
-        scale_html += f"<div class='likert-value'>پاسخ شما: {labels[st.session_state[key] - 1]}</div>"
+        scale_html += f"<div class='likert-value'>پاسخ شما: {st.session_state[key]}</div>"
     
     scale_html += "</div>"
-
-    # تزریق HTML/CSS برای خط و نقاط
-    components.html(scale_html, height=80)
-
-    # دکمه ارسال (پررنگ و فعال)
-    button_label = "ثبت پاسخ"
-    if st.session_state.get(key) is not None:
-        st.button(button_label, use_container_width=True, key=f"submit_{key}", type="primary")
-    else:
-        st.button(button_label, use_container_width=True, key=f"submit_{key}", type="secondary")
-
+    
+    # تزریق JavaScript برای مدیریت کلیک
+    components.html(scale_html + """
+    <script>
+    function setLikertValue(value) {
+        const streamlitDoc = window.parent.document;
+        const buttons = streamlitDoc.querySelectorAll('button[data-testid="stButton"]'); // جستجوی دکمه‌ها در DOM
+        buttons.forEach(btn => {
+            if (btn.textContent.trim() === String(value)) {
+                btn.click();  // کلیک روی دکمه مورد نظر برای انتخاب مقدار
+            }
+        });
+    }
+    </script>
+    """, height=80)
+    
+    # دکمه‌های واقعی (مخفی و کوچک)
+    btn_cols = st.columns(scale)
+    for i in range(scale):
+        with btn_cols[i]:
+            value = scale - i
+            if st.button(
+                str(value),
+                key=f"{key}_btn_{value}",
+                type="primary" if st.session_state.get(key) == value else "secondary",
+                help="این دکمه‌ها مخفی هستند"  # پیام راهنما
+            ):
+                st.session_state[key] = value
+                st.rerun()
+    
     return st.session_state.get(key)
 
-
-
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران