Update app.py

app.py

@@ -5,7 +5,6 @@ import streamlit.components.v1 as components
 from datetime import datetime
 import gspread
 from google.oauth2.service_account import Credentials
-import plotly.graph_objects as go
 import os
 import json
 import random
@@ -734,106 +733,63 @@ h3 {
 [data-testid="stAppViewContainer"] p:not(.stButton p):not(.stDownloadButton p):not(.stFormSubmitButton p) {
     margin-bottom: 1em !important;
     line-height: 1.8 !important;
-} 
+}
 </style>
 """, unsafe_allow_html=True)
 
 # ========== توابع اصلی ==========
 def custom_likert_slider(question_data):
-    """نمایش سوال لیکرت با طیف رنگی Plotly و بدون اسلایدر قابل مشاهده"""
+    """نمایش سوال لیکرت با اسلایدر نقطه‌ای و لیبل‌های سفارشی"""
     question = question_data["question"]
     key = question_data["key"]
     points = question_data["scale"]
-    labels = question_data.get("labels", ["کاملاً مخالفم", "کاملاً موافقم"])
+    labels = question_data.get("labels", ["کمترین", "بیشترین"])  # لیبل‌های پیش‌فرض
     
     # مقدار پیش‌فرض (وسط طیف)
-    default_value = st.session_state.answers.get(key, (points - 1) // 2)
-    
-    st.markdown(f"**{question}**")
-    
-    # ایجاد یک container برای نمایش طیف
-    container = st.container()
-    
-    # نمایش طیف با رنگ بنفش روی گزینه انتخاب‌شده
-    fig = go.Figure()
-    
-    positions = list(range(points))
-    
-    # اضافه کردن نقاط به نمودار
-    fig.add_trace(go.Scatter(
-        x=positions,
-        y=[0]*points,
-        mode='markers+text',
-        marker=dict(
-            size=30,
-            color=['#d1c4e9' if i != st.session_state.answers.get(key, default_value) else '#6a0dad' for i in positions],
-            line=dict(width=2, color='#6a0dad')
-        ),
-        text=labels if len(labels) == points else [str(i+1) for i in positions],
-        textposition="top center",
-        textfont=dict(size=14)
-    ))
-    
-    # خط اتصال نقاط
-    fig.add_trace(go.Scatter(
-        x=positions,
-        y=[0]*points,
-        mode='lines',
-        line=dict(color='#d1c4e9', width=2),
-        hoverinfo='none'
-    ))
-    
-    # تنظیمات layout
-    fig.update_layout(
-        xaxis=dict(
-            tickmode='array',
-            tickvals=positions,
-            ticktext=labels if len(labels) == points else [str(i+1) for i in positions],
-            showgrid=False,
-            zeroline=False,
-            range=[-0.5, points-0.5]
-        ),
-        yaxis=dict(showticklabels=False, showgrid=False, zeroline=False, range=[-0.1, 0.1]),
-        margin=dict(l=20, r=20, t=40, b=20),
-        height=150,
-        showlegend=False,
-        hovermode=False,
-        clickmode='event+select'
-    )
+    default_value = st.session_state.get(key, (points + 1) // 2)
     
-    # نمایش نمودار در container
-    with container:
-        selected_point = st.plotly_chart(
-            fig, 
-            use_container_width=True, 
-            config={'staticPlot': False},
-            key=f"plot_{key}"
-        )
-    
-    # استفاده از st.slider مخفی برای مدیریت انتخاب
-    selected_value = st.slider(
-        "",
-        min_value=0,
-        max_value=points-1,
-        value=st.session_state.answers.get(key, default_value),
-        step=1,
-        key=f"hidden_slider_{key}",
-        label_visibility="collapsed"
-    )
+    # 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[0]}</span>
+            <span>{labels[1]}</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;"
+               oninput="updateSlider('{key}')">
+        <div style="text-align: center; margin-top: 10px; direction: rtl;">
+            پاسخ انتخاب‌شده: <strong><span id="output_{key}">{default_value}</span></strong>
+        </div>
+    </div>
+
+    <script>
+    function updateSlider(key) {{
+        const value = parseInt(document.getElementById(key).value);
+        document.getElementById('output_' + key).innerText = value;
+
+        // ارسال مقدار به Streamlit
+        window.parent.postMessage({{
+            type: 'streamlit:setComponentValue',
+            key: key,
+            value: value
+        }}, '*');
+    }}
+    </script>
+    """
     
-    # ذخیره مقدار انتخاب شده
-    st.session_state.answers[key] = selected_value
-    st.session_state[key] = selected_value
+    # نمایش ک��مپوننت
+    components.html(html, height=150)
     
-    # نمایش انتخاب کاربر
-    selected_label = labels[selected_value] if len(labels) > selected_value else str(selected_value+1)
-    st.markdown(
-        f"<p style='text-align:center; color:#6a0dad; font-weight:bold;'>پاسخ شما: <strong>{selected_label}</strong></p>", 
-        unsafe_allow_html=True
-    )
+    # مقدار نهایی
+    value = st.session_state.get(key, default_value)
     
-    return selected_value
+    # ذخیره مقدار جدید در session_state
+    st.session_state[key] = value
     
+    return value
+
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران
@@ -906,7 +862,10 @@ def show_explanation(exp_type):
         elif exp_type == "counterfactual":
             st.markdown("<p class='explanation-title'>علت قیمت گذاری:</p>", unsafe_allow_html=True)
             for item in explanations.get(exp_type, []):
-                st.markdown(f"<p class='explanation-item'>• {item}</p>", unsafe_allow_html=True)           
+                st.markdown(f"<p class='explanation-item'>• {item}</p>", unsafe_allow_html=True)
+
+
+            
 
 def create_likert_question(question, key, scale_type="5point"):
     """نمایش سوال لیکرت با اسلایدر نقطه‌ای"""
@@ -1251,7 +1210,7 @@ def random_likert_questions():
                     "key": "distributive_1", 
                     "question": "قیمتی که به شما ارائه شد، چگونه بود؟",
                     "scale": 7,
-                    "labels": ["کاملاً نامنصفانه", "کاملاً منصفانه"]
+                    "labels": ["کاملاً نامنصفانه", "کاملاً منصفانه"]  # لیبل‌های سفارشی برای این سوال
                 },
                 {
                     "key": "distributive_2", 
@@ -1271,7 +1230,7 @@ def random_likert_questions():
             "title": "سوال توجه",
             "key": "attention_check",
             "questions": [
-                {"key": "attention_check2", "question": "تا چه مقدار با دقت به سوالات پاسخ می‌دهید؟", "scale": 7, "labels": ["خیلی کم", "خیلی زیاد"]} 
+                {"key": "attention_check2", "question": "تا چه مقدار با دقت به سوالات پاسخ می‌دهید؟", "scale": 7,"labels": ["خیلی کم", "خیلی زیاد"]} 
             ]
         },
         {
@@ -1296,6 +1255,7 @@ def random_likert_questions():
         }
     ]
 
+
     # مقداردهی اولیه
     if 'current_likert_group' not in st.session_state:
         st.session_state.current_likert_group = 0
@@ -1331,16 +1291,12 @@ def random_likert_questions():
     for question in current_group['questions']:
         answer = custom_likert_slider(question)
         st.session_state.answers[question["key"]] = answer 
+
     
     # دکمه ادامه/اتمام
     button_label = "ادامه به گروه بعدی" if st.session_state.current_likert_group < len(question_groups)-1 else "اتمام پرسشنامه"
     
     if st.button(button_label):
-        # ذخیره پاسخ‌ها قبل از رفتن به گروه بعدی
-        for question in current_group['questions']:
-            if question["key"] in st.session_state:
-                st.session_state.answers[question["key"]] = st.session_state[question["key"]]
-        
         # رفتن به گروه بعدی یا صفحه پایانی
         if st.session_state.current_likert_group < len(question_groups) - 1:
             st.session_state.current_likert_group += 1