Update app.py

app.py

@@ -738,68 +738,72 @@ h3 {
 """, unsafe_allow_html=True)
 
 def custom_likert_slider(question_data):
-    """نمایش سوال لیکرت با اسلایدر معکوس (7 در راست، 1 در چپ)"""
+    """نمایش سوال لیکرت با اسلایدر معکوس و لیبل‌های سفارشی"""
     question = question_data["question"]
     key = question_data["key"]
     points = question_data["scale"]
-    labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
+    labels = question_data.get("labels", ["کمترین", "بیشترین"])  # لیبل‌های پیش‌فرض
     
-    # مقدار پیش‌فرض از session_state یا وسط طیف
-    default_value = st.session_state.get(key, (points + 1) // 2)
+    # مقدار پیش‌فرض
+    raw_value = st.session_state.get(key)
+    default_value = raw_value if isinstance(raw_value, int) else (points + 1) // 2
     
-    # ایجاد یک container برای گروه‌بندی بهتر
-    with st.container():
-        st.markdown(f"<p style='font-size:16px; margin-bottom:5px;'>{question}</p>", unsafe_allow_html=True)
-        
-        # اسلایدر با جهت معکوس
-        raw_value = st.slider(
-            "",
-            min_value=1,
-            max_value=points,
-            value=default_value,
-            step=1,
-            key=f"slider_{key}_unique"
-        )
-        
-        # معکوس کردن مقدار برای ذخیره‌سازی (7 در راست، 1 در چپ)
-        value = points + 1 - raw_value
-        
-        # ذخیره فوری مقدار معکوس در session_state
-        st.session_state[key] = value
-        if 'answers' not in st.session_state:
-            st.session_state.answers = {}
-        st.session_state.answers[key] = value
-        
-        # نمایش لیبل‌ها (کاملاً موافقم در راست، کاملاً مخالفم در چپ)
-        st.markdown(
-            f"""
-            <div style="display: flex; justify-content: space-between; font-size: 12px; margin: 5px 0;">
-                <span>{labels[1]}</span>
-                <span>{labels[0]}</span>
-            </div>
-            <p style='text-align:center; color:#6a0dad; font-weight:bold;'>
-                پاسخ شما: {value}
-            </p>
-            """,
-            unsafe_allow_html=True
-        )
+    # کلید مخفی برای ذخیره مقدار
+    hidden_key = f"hidden_{key}"
+    
+    # HTML و JavaScript برای اسلایدر
+    html = f"""
+    <div id="container_{key}" style="direction: ltr; font-family: 'B Nazanin'; margin-bottom: 30px;">
+        <label style="font-size: 16px; font-weight: bold; display: block; text-align: right;">{question}</label>
+        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
+            <span>{labels[1]}</span>
+            <span>{labels[0]}</span>
+        </div>
+        <input type="range" id="{key}" min="1" max="{points}" step="1" value="{default_value}"
+               style="width: 100%; height: 10px; accent-color: #6a0dad; margin-bottom: 15px; transform: scaleX(-1);"
+               oninput="updateSlider('{key}', '{hidden_key}', {points})">
+        <div style="text-align as: center; margin-top: 10px; directionJune: rtl;">
+            پاسخ انتخاب‌شده: <strong><span id="output_{key}">{default_value}</span></strong>
+        </div>
+    </div>
+
+    <script>
+    function updateSlider(key, hidden_key, points) {{
+        const slider = document.getElementById(key);
+        const value = points + 1 - parseInt(slider.value); // معکوس کردن مقدار
+        document.getElementById('output_' + key).innerText = value;
         
-        # استایل‌های سفارشی برای اسلایدر
-        st.markdown("""
-        <style>
-            div[role="slider"] {
-                background: #e0e0e0 !important;
-            }
-            .stSlider .st-bd {
-                background-color: #6a0dad !important;
-            }
-            .stSlider .st-be {
-                background-color: #6a0dad !important;
-            }
-        </style>
-        """, unsafe_allow_html=True)
+        // ایجاد input مخفی برای ارسال مقدار به Streamlit
+        const hiddenInput = document.createElement('input');
+        hiddenInput.type = 'hidden';
+        hiddenInput.id = hidden_key;
+        hiddenInput.name = hidden_key;
+        hiddenInput.value = value;
+        document.getElementById('container_' + key).appendChild(hiddenInput);
         
-        return value
+        // تحریک آپدیت Streamlit
+        const event = new Event('change');
+        hiddenInput.dispatchEvent(event);
+    }}
+    </script>
+    """
+    
+    # نمایش کامپوننت
+    components.html(html, height=150)
+    
+    # استفاده از st.empty برای دریافت مقدار از input مخفی
+    with st.empty():
+        if hidden_key in st.session_state:
+            value = st.session_state[hidden_key]
+            # ذخیره مقدار در session_state
+            st.session_state[key] = value
+            if 'answers' not in st.session_state:
+                st.session_state.answers = {}
+            st.session_state.answers[key] = value
+        else:
+            value = default_value
+    
+    return value
         
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""