Update app.py

app.py

@@ -739,37 +739,53 @@ h3 {
 
 
 
-def likert_radio(question_data):
-    """نمایش سوال لیکرت با 7 گزینه انتخابی"""
+
+def custom_likert_slider(question_data):
+    """نمایش سوال لیکرت با اسلایدر 7 نقطه‌ای افقی و لیبل‌های سفارشی"""
     question = question_data["question"]
     key = question_data["key"]
-    points = question_data["scale"]  # تعداد نقاط (7 یا 5)
+    points = question_data["scale"]  # تعداد نقاط (7 نقطه)
     labels = question_data.get("labels", ["کمترین", "بیشترین"])  # لیبل‌های پیش‌فرض
     
-    # مقدار پیش‌فرض (وسط طیف)
-    default_value = st.session_state.get(key, (points + 1) // 2)
-    
-    # نمایش سوال
-    st.markdown(f"<p style='font-size:16px; margin-bottom:5px;'>{question}</p>", unsafe_allow_html=True)
-    
-    # استفاده از st.radio برای نمایش گزینه‌ها
-    options = [str(i) for i in range(1, points+1)]  # 7 گزینه از 1 تا 7
-    value = st.radio(
-        "",
-        options=options,
-        index=default_value - 1,  # تنظیم مقدار پیش‌فرض
-        key=f"radio_{key}",
-        format_func=lambda x: f"گزینه {x}"  # نمایش گزینه‌ها به صورت "گزینه 1", "گزینه 2" و غیره
-    )
-    
-    # نمایش پاسخ انتخاب‌شده
-    st.markdown(f"<p style='text-align:center; color:#6a0dad; font-weight:bold;'>پاسخ شما: {value}</p>", unsafe_allow_html=True)
+    # دریافت مقدار آخرین انتخاب از session_state (اگر موجود باشد)
+    default_value = st.session_state.get(key, (points + 1) // 2)  # اگر هیچ مقداری ذخیره نشده بود، مقدار پیش‌فرض وسط طیف
+
+    # 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>
+    """
     
-    # ذخیره مقدار در session_state
-    st.session_state[key] = value
+    # نمایش کامپوننت HTML
+    components.html(html, height=150)
     
-    return value
-
+    # در اینجا باید مقدار نهایی انتخاب‌شده را از session_state ذخیره کنیم
+    return st.session_state.get(key, default_value)
 
 def save_likert_answers():
     """ذخیره مقادیر نهایی اسلایدرها در session_state پس از کلیک روی دکمه 'ادامه'"""
@@ -777,6 +793,7 @@ def save_likert_answers():
         if "distributive" in key or "procedural" in key or "informational" in key:  # انتخاب کلیدهای مربوط به سوالات
             st.session_state[key] = st.session_state.get(key, None)
 
+
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران
@@ -1268,7 +1285,7 @@ def random_likert_questions():
 
 
 def random_likert_questions():
-    """نمایش سوالات لیکرت به ترتیب مشخص با 7 گزینه انتخابی"""
+    """نمایش سوالات لیکرت به ترتیب مشخص با اسلایدر سفارشی"""
     # تعریف گروه‌های سوالات با لیبل‌های سفارشی
     question_groups = [
         {
@@ -1330,7 +1347,7 @@ def random_likert_questions():
     # نمایش تمام سوالات این گروه در یک صفحه
     for question in current_group['questions']:
         # دریافت مقدار اسلایدر و ذخیره آن
-        answer = likert_radio(question)
+        answer = custom_likert_slider(question)
         st.session_state[question["key"]] = answer  # ذخیره مقدار اسلایدر در session_state
 
     # دکمه ادام��/اتمام
@@ -1347,6 +1364,7 @@ def random_likert_questions():
         else:
             st.session_state.current_page = "explanation_questions"
             st.rerun()
+            
 def explanation_questions():
     """نمایش سوالات تکمیلی به صورت مرحله‌ای با دکمه ادامه"""
     st.markdown("### 📋 سوالات تکمیلی")