Update app.py

app.py

@@ -736,55 +736,103 @@ h3 {
 }
 </style>
 """, unsafe_allow_html=True)
+
+# ========== توابع اصلی ==========
 def custom_likert_slider(question_data):
-    """نمایش سوال لیکرت با اسلایدر ساده و ذخیره‌سازی مستقیم"""
+    """نمایش سوال لیکرت با اسلایدر نقطه‌ای و لیبل‌های سفارشی"""
     question = question_data["question"]
     key = question_data["key"]
     points = question_data["scale"]
     labels = question_data.get("labels", ["کمترین", "بیشترین"])
     
-    # مقدار پیش‌فرض
-    default_value = st.session_state.get(key, (points + 1) // 2)
+    # مقدار پیش‌فرض (وسط طیف)
+    default_value = (points + 1) // 2
+    current_value = st.session_state.get(key, default_value)
     
-    # نمایش سوال
-    st.markdown(f"<p style='font-size:16px; font-weight:bold; text-align:right;'>{question}</p>", unsafe_allow_html=True)
+    # 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="{current_value}"
+               style="width: 100%; height: 10px; accent-color: #6a0dad; margin-bottom: 15px;"
+               oninput="updateSlider('{key}')"
+               onchange="updateSlider('{key}')">
+        <div style="text-align: center; margin-top: 10px; direction: rtl;">
+            پاسخ انتخاب‌شده: <strong><span id="output_{key}">{current_value}</span></strong>
+        </div>
+    </div>
+
+    <script>
+    function updateSlider(key) {{
+        const slider = document.getElementById(key);
+        const value = parseInt(slider.value);
+        document.getElementById('output_' + key).innerText = value;
+        
+        // ذخیره مقدار در یک متغیر مخفی برای دسترسی Streamlit
+        window.sliderValues = window.sliderValues || {{}};
+        window.sliderValues[key] = value;
+        
+        // ارسال مقدار به Streamlit
+        try {{
+            window.parent.postMessage({{
+                type: 'streamlit:setComponentValue',
+                key: key,
+                value: value
+            }}, '*');
+        }} catch (e) {{
+            console.error('Error sending message to Streamlit:', e);
+        }}
+        
+        // ذخیره مقدار در localStorage برای اطمینان
+        localStorage.setItem(key, value);
+    }}
     
-    # اسلایدر معکوس
-    raw_value = st.slider(
-        "",
-        min_value=1,
-        max_value=points,
-        value=default_value,
-        step=1,
-        key=f"slider_{key}",
-        label_visibility="hidden"
-    )
+    // بازیابی مقدار اولیه از localStorage اگر وجود داشته باشد
+    window.addEventListener('load', () => {{
+        const key = '{key}';
+        const savedValue = localStorage.getItem(key);
+        if (savedValue) {{
+            document.getElementById(key).value = savedValue;
+            document.getElementById('output_' + key).innerText = savedValue;
+        }}
+    });
+    </script>
+    """
     
-    # معکوس کردن مقدار
-    value = points + 1 - raw_value
+    # رندر کامپوننت HTML
+    components.html(html, height=150)
     
-    # ذخیره مقدار
-    st.session_state[key] = value
-    if 'answers' not in st.session_state:
-        st.session_state.answers = {}
-    st.session_state.answers[key] = value
+    # خواندن مقدار از localStorage یا session_state
+    if key in st.session_state:
+        current_value = st.session_state[key]
+    else:
+        # تلاش برای خواندن از localStorage از طریق JavaScript
+        st.markdown(
+            f"""
+            <script>
+            const savedValue = localStorage.getItem('{key}');
+            if (savedValue) {{
+                window.parent.postMessage({{
+                    type: 'streamlit:setComponentValue',
+                    key: '{key}',
+                    value: parseInt(savedValue)
+                }}, '*');
+            }}
+            </script>
+            """,
+            unsafe_allow_html=True
+        )
+        current_value = st.session_state.get(key, default_value)
     
-    # نمایش لیبل‌ها
-    st.markdown(
-        f"""
-        <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px;">
-            <span>{labels[1]}</span>
-            <span>{labels[0]}</span>
-        </div>
-        <p style='text-align:center; direction:rtl;'>
-            پاسخ انتخاب‌شده: <strong>{value}</strong>
-        </p>
-        """,
-        unsafe_allow_html=True
-    )
+    # برای دیباگ: نمایش مقدار فعلی
+    st.write(f"مقدار فعلی برای {key}: {current_value}")
+    
+    return current_value
     
-    return value
-        
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران
@@ -1194,7 +1242,8 @@ def attention_check1():
             st.warning("لطفاً یک گزینه را انتخاب کنید")
 
 def random_likert_questions():
-    """نمایش سوالات لیکرت به ترتیب مشخص"""
+    """نمایش سوالات لیکرت به ترتیب مشخص با اسلایدر سفارشی"""
+    # تعریف گروه‌های سوالات با لیبل‌های سفارشی
     question_groups = [
         {
             "title": "عدالت توزیعی",
@@ -1204,7 +1253,7 @@ def random_likert_questions():
                     "key": "distributive_1", 
                     "question": "قیمتی که به شما ارائه شد، چگونه بود؟",
                     "scale": 7,
-                    "labels": ["کاملاً نامنصفانه", "کاملاً منصفانه"]
+                    "labels": ["کاملاً نامنصفانه", "کاملاً منصفانه"]  # لیبل‌های سفارشی برای این سوال
                 },
                 {
                     "key": "distributive_2", 
@@ -1224,7 +1273,7 @@ def random_likert_questions():
             "title": "سوال توجه",
             "key": "attention_check",
             "questions": [
-                {"key": "attention_check2", "question": "تا چه مقدار با دقت به سوالات پاسخ می‌دهید؟", "scale": 7, "labels": ["خیلی کم", "خیلی زیاد"]} 
+                {"key": "attention_check2", "question": "تا چه مقدار با دقت به سوالات پاسخ می‌دهید؟", "scale": 7,"labels": ["خیلی کم", "خیلی زیاد"]} 
             ]
         },
         {
@@ -1249,6 +1298,7 @@ def random_likert_questions():
         }
     ]
 
+
     # مقداردهی اولیه
     if 'current_likert_group' not in st.session_state:
         st.session_state.current_likert_group = 0
@@ -1256,30 +1306,48 @@ def random_likert_questions():
     # دریافت گروه جاری
     current_group = question_groups[st.session_state.current_likert_group]
     
-    # نمایش راهنمای پاسخ
+    # نمایش عنوان گروه
     st.markdown("""
-    <div style="background-color: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px;">
-        <h4>راهنمای پاسخ:</h4>
-        <p>لطفاً برای هر سوال با حرکت دادن اسلایدر، میزان موافقت خود را مشخص کنید.</p>
-        <p>مقادیر از چپ به راست: کاملاً مخالفم ← کاملاً موافقم</p>
+    <style>
+        .guide-text p {
+            font-size: 14px !important;
+        }
+    </style>
+    """, unsafe_allow_html=True)
+    st.markdown("""    
+    <div class="guide-text" style="display: flex; flex-direction: column; align-items: center; background-color: #f0f2f6; border-radius: 10px; padding: 20px; gap: 15px;">
+        <div style="flex: 1;">
+            <h3>راهنمای پاسخ:</h3>
+            <p>برای پاسخ به سوالات، با یک طیف کشویی مواجه خواهید شد.</p>
+            <p>در این طیف 7 نقطه وجود دارد:
+                <br>- سمت چپ: کمترین مقدار
+                <br>- سمت راست: بیشترین مقدار
+            </p>
+            <p>نقطه روی کشو را جابجا کنید و در مقداری که پاسخ شماست متوقف شوید.</p>
+            <p>پاسخ شما زیر طیف نمایش داده خواهد شد.</p>
+            <p>اگر از پاسخ‌هایتان مطمئن هستید، روی دکمه «ادامه» کلیک کنید.</p>
+        </div>
     </div>
     """, unsafe_allow_html=True)
     
-    # نمایش تمام سوالات گروه جاری
+    # نمایش تمام سوالات این گروه در یک صفحه
     for question in current_group['questions']:
         answer = custom_likert_slider(question)
+        st.session_state.answers[question["key"]] = answer 
+
     
     # دکمه ادامه/اتمام
-    col1, col2 = st.columns([1, 2])
-    with col2:
-        button_label = "ادامه به گروه بعدی" if st.session_state.current_likert_group < len(question_groups)-1 else "اتمام پرسشنامه"
-        if st.button(button_label, use_container_width=True):
-            if st.session_state.current_likert_group < len(question_groups) - 1:
-                st.session_state.current_likert_group += 1
-            else:
-                st.session_state.current_page = "explanation_questions"
+    button_label = "ادامه به گروه بعد��" if st.session_state.current_likert_group < len(question_groups)-1 else "اتمام پرسشنامه"
+    
+    if st.button(button_label):
+        # رفتن به گروه بعدی یا صفحه پایانی
+        if st.session_state.current_likert_group < len(question_groups) - 1:
+            st.session_state.current_likert_group += 1
             st.rerun()
-            
+        else:
+            st.session_state.current_page = "explanation_questions"
+            st.rerun()
+
 def explanation_questions():
     """نمایش سوالات تکمیلی به صورت مرحله‌ای با دکمه ادامه"""
     st.markdown("### 📋 سوالات تکمیلی")
@@ -1369,7 +1437,7 @@ def explanation_questions():
             
             # رفرش صفحه برای نمایش سوال بعدی
             st.rerun()
-            
+        
 def demographic_form():
     """فرم اطلاعات دموگرافیک"""
     st.markdown("### 📝 اطلاعات دموگرافیک")
@@ -1477,7 +1545,11 @@ def main():
     user_agent = st.query_params.get("user_agent", [""])[0]
     st.session_state.is_desktop = "mobile" not in user_agent.lower()
 
-    # مقداردهی اولیه session_state
+
+    if st.session_state.is_desktop:
+        # اطمینان از نمایش همان حالت موبایل برای همه دستگاه‌ها
+        st.session_state.is_desktop = False
+
     if 'answers' not in st.session_state:
         st.session_state.answers = {}
     
@@ -1490,7 +1562,6 @@ def main():
         st.session_state.price_accepted = 0
         st.session_state.attention_check1 = None
         
-    # تعریف صفحات
     pages = {
         "welcome": welcome_page,
         "scenario_explanation": scenario_explanation,
@@ -1498,12 +1569,11 @@ def main():
         "attention_check1": attention_check1,
         "random_likert_questions": random_likert_questions,
         "explanation_questions": explanation_questions,
-        "demographic": demographic_form,
-        "contact": user_contact,
+        "demographic": demographic_form,  # دموگرافیک قبل از کانتکت
+        "contact": user_contact,         # کانتکت در انتها
         "thank_you": thank_you_page
     }
 
-    # نمایش صفحه جاری
     pages[st.session_state.current_page]()
 
 if __name__ == "__main__":