Update app.py

app.py

@@ -771,7 +771,10 @@ body, .stApp {
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
+import streamlit as st
+
 def enhanced_likert_scale(question_data):
+    """لیکرت اسکیل ساده و بهینه با Streamlit slider"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -782,41 +785,21 @@ def enhanced_likert_scale(question_data):
         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(
+        f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{question}</div>",
+        unsafe_allow_html=True,
+    )
 
-    # تابع کمکی برای ساخت HTML پویا
-    def build_scale_html(current_value):
-        scale_html = f"""
+    # استایل برای لیبل‌ها و خط
+    st.markdown(
+        """
         <style>
-            @font-face {{
+            @font-face {
                 font-family: 'Vazir';
                 src: url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir-Bold.woff2') format('woff2');
-            }}
-            .likert-line {{
+            }
+            .likert-labels {
                 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:  Ascending;
                 margin: 5px auto 15px;
                 display: flex;
                 justify-content: space-between;
@@ -825,63 +808,52 @@ def enhanced_likert_scale(question_data):
                 font-family: 'Vazir', sans-serif;
                 font-weight: bold;
                 color: #6a0dad;
-            }}
-            .separator-line {{
+            }
+            .likert-separator {
                 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>
-            </div>
-            <div class="likert-line">
-        """
-        for i in range(1, scale + 1):
-            value = scale - i + 1
-            active_class = "active" if current_value == value else ""
-            scale_html += f"<div class='likert-dot {active_class}'></div>"
-        scale_html += "</div></div>"
-        return scale_html
-
-    # رندر HTML با مقدار فعلی
-    components.html(build_scale_html(st.session_state[key]), height=60)
-
-    # ورودی عددی
-    value = st.number_input(
-        "پاسخ شما (از 1 تا 7):",
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # نمایش لیبل‌ها
+    st.markdown(
+        f"""
+        <div class="likert-labels">
+            <span>{labels[1]}</span>
+            <span>{labels[0]}</span>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # استفاده از slider به جای number_input و HTML
+    value = st.slider(
+        "",
         min_value=0,
         max_value=scale,
         value=st.session_state[key],
         step=1,
-        key=f"{key}_input",
-        placeholder="0 (پاسخ نداده) یا 1-7",
-        format="%d"
+        key=f "slider_{key}",
+        format="%d",
     )
 
-    # به‌روزرسانی مقدار در session_state
+    # به‌روزرسانی 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,
+    )
+
     # خط جداکننده
-    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[key]