Update app.py

app.py

@@ -771,91 +771,126 @@ body, .stApp {
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
-import streamlit as st
-
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل ساده و بهینه با Streamlit slider"""
+    """لیکرت اسکیل با محدوده 0 تا scale و عدم نمایش نقطه برای 0"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
     labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
-
+    
     # مقداردهی اولیه
     if key not in st.session_state:
         st.session_state[key] = 0
 
     # نمایش سوال
-    st.markdown(
-        f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{question}</div>",
-        unsafe_allow_html=True,
-    )
-
-    # استایل برای لیبل‌ها و خط
-    st.markdown(
-        """
-        <style>
-            @font-face {
-                font-family: 'Vazir';
-                src: url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir-Bold.woff2') format('woff2');
-            }
-            .likert-labels {
-                width: 80%;
-                margin: 5px auto 15px;
-                display: flex;
-                justify-content: space-between;
-                direction: rtl;
-                font-size: 14px;
-                font-family: 'Vazir', sans-serif;
-                font-weight: bold;
-                color: #6a0dad;
-            }
-            .likert-separator {
-                width: 80%;
-                height: 2px;
-                background: #6a0dad;
-                margin: 20px auto;
-            }
-        </style>
-        """,
-        unsafe_allow_html=True,
-    )
-
-    # نمایش لیبل‌ها
-    st.markdown(
-        f"""
+    st.markdown(f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{question}</div>", 
+                unsafe_allow_html=True)
+
+    # ایجاد خط و نقاط با HTML/CSS
+    scale_html = f"""
+    <style>
+        @font-face {{
+            font-family: 'Vazir';
+            src: url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir-Bold.woff2') format('woff2');
+        }}
+        .likert-line {{
+            width: 80%;
+            height: 2px;
+            background: #6a0dad;
+            margin: 0 auto;
+            position: relative;
+            display: flex;
+            justify-content: space-between;
+            direction: rtl;
+        }}
+        .likert-dot {{
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            background: white;
+            border: 2px solid #6a0dad;
+            position: relative;
+            top: -9px;
+        }}
+        .likert-dot.active {{
+            background: #6a0dad;
+        }}
+        .likert-labels {{
+            width: 80%;
+            margin: 5px auto 15px;
+            display: flex;
+            justify-content: space-between;
+            direction: rtl;
+            font-size: 14px;
+            font-family: 'Vazir', sans-serif;
+            font-weight: bold;
+            color: #6a0dad;
+        }}
+        .separator-line {{
+            width: 80%;
+            height: 2px;
+            background: #6a0dad;
+            margin: 20px auto;
+        }}
+        @media (max-width: 768px) {{
+            .likert-line {{
+                width: 90%;
+            }}
+            .likert-labels {{
+                width: 90%;
+            }}
+        }}
+    </style>
+    
+    <div>
         <div class="likert-labels">
-            <span>{labels[1]}</span>
             <span>{labels[0]}</span>
+            <span>{labels[1]}</span>
         </div>
-        """,
-        unsafe_allow_html=True,
-    )
+        <div class="likert-line">
+    """
+
+    # اضافه کردن نقاط فقط برای مقادیر 1 تا scale
+    current_value = st.session_state.get(key, 0)
+    for i in range(1, scale+1):
+        value = i+1 # مقادیر از 1 تا scale
+        active_class = "active" if current_value == value else ""
+        scale_html += f"<div class='likert-dot {active_class}'></div>"
+    
+    scale_html += "</div></div>"
+    
+    # نمایش کامپوننت HTML
+    components.html(scale_html, height=60)
 
-    # استفاده از slider به جای number_input و HTML
-    value = st.slider(
-        "",
-        min_value=0,
+    # ورودی عددی با محدوده 0 تا scale (0 قابل انتخاب است)
+    value = st.number_input(
+        "پاسخ شما (از 1 تا 7):",
+        min_value=0,  # 0 مجاز است
         max_value=scale,
-        value=st.session_state[key],
+        value=st.session_state.get(key, 0),
         step=1,
-        key=f "slider_{key}",
+        key=f"{key}_input",
+        placeholder="0 (پاسخ نداده) یا 1-7",
         format="%d",
+        on_change=lambda: st.session_state.update({key: st.session_state[f"{key}_input"]})
     )
 
-    # به‌روزرسانی session_state
-    if value != st.session_state[key]:
-        st.session_state[key] = value
-
-    # نمایش مقدار انتخاب‌شده (اختیاری)
-    st.markdown(
-        f"<div style='text-align:center; font-size:14px; color:#6a0dad;'>پاسخ شما: {value}</div>",
-        unsafe_allow_html=True,
-    )
+    # خط جداکننده بنفش
+    # خط جداکننده بنفش - تعریف استایل و HTML با هم
+    st.markdown("""
+    <style>
+        .likert-separator {
+            width: 80%;
+            height: 2px;
+            background: #6a0dad;
+            margin: 20px auto;
+        }
+    </style>
+    <div class="likert-separator"></div>
+    """, unsafe_allow_html=True)
 
-    # خط جداکننده
-    st.markdown('<div class="likert-separator"></div>', unsafe_allow_html=True)
+    return st.session_state.get(key)
 
-    return st.session_state[key]
     
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""