Update app.py

app.py

@@ -10,6 +10,7 @@ import os
 import json
 import random
 import time
+import requests
 
 # تنظیمات اولیهه
 st.set_page_config(layout="wide", page_title="راهیار - تحلیل انصاف قیمتی", page_icon="🚖")
@@ -773,125 +774,225 @@ body, .stApp {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با محدوده 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>", 
+    st.markdown(f"<div style='text-align:right; font-weight:bold; margin-bottom:15px; direction: rtl;'>{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[0]}</span>
-            <span>{labels[1]}</span>
-        </div>
-        <div class="likert-line">
-    """
+    # رادیو باتن اصلی (مخفی)
+    selected_value = st.radio(
+        "",
+        options=list(range(1, scale+1)),
+        index=st.session_state.get(key, 0) - 1 if st.session_state.get(key, 0) > 0 else None,
+        label_visibility="collapsed",
+        horizontal=True,
+        key=f"{key}_radio"
+    )
+
+    # مخفی کردن رادیو باتن
+    st.markdown(
+        """
+        <style>
+            div[data-testid="stRadio"] {
+                display: none;
+            }
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
 
-    # اضافه کردن نقاط فقط برای مقادیر 1 تا scale
-    current_value = st.session_state.get(key, 0)
-    for i in range(1, scale+1):
-        value = i # مقادیر از 1 تا scale
-        active_class = "active" if current_value == value else ""
-        scale_html += f"<div class='likert-dot {active_class}'></div>"
+    # ذخیره مقدار انتخاب شده
+    if selected_value is not None:
+        st.session_state[key] = selected_value
+
+    # ایجاد JavaScript
+    js_code = """
+    <script>
+    function handleLikertClick(index) {
+        const radios = parent.document.querySelectorAll('div[data-testid="stRadio"] input[type="radio"]');
+        if (radios.length > index) {
+            radios[index].click();
+        }
+    }
+    </script>
+    """
     
-    scale_html += "</div></div>"
+    # ایجاد دکمه‌های سفارشی
+    options_html = "".join([
+        f'<div class="likert-option {"selected" if st.session_state.get(key) == i+1 else ""} {"middle-option" if (scale % 2 == 1 and i+1 == (scale//2 + 1)) else ""}" '
+        f'onclick="handleLikertClick({i})">'
+        f'<span class="likert-number">{i+1}</span>'
+        '</div>'
+        for i in range(scale)
+    ])
+
+    # تنظیم لیبل وسط برای مقیاس‌های فرد
+    middle_label = ""
+    middle_label_text = "متوسط"
+    if scale % 2 == 1:  # اگر مقیاس فرد باشد
+        middle_label = f"""
+            <div class='label-container middle-label'>
+                <span>{middle_label_text}</span>
+            </div>
+        """
     
-    # نمایش کامپوننت HTML
-    components.html(scale_html, height=60)
-
-    # ورودی عددی با محدوده 0 تا scale (0 قابل انتخاب است)
-    value = st.number_input(
-        "پاسخ شما (از 1 تا 7):",
-        min_value=0,  # 0 مجاز است
-        max_value=scale,
-        value=st.session_state.get(key, 0),
-        step=1,
-        key=f"{key}_input",
-        placeholder="0 (پاسخ نداده) یا 1-7",
-        format="%d",
-        on_change=lambda: st.session_state.update({key: st.session_state[f"{key}_input"]})
+    # ترکیب تمام بخش‌ها با استایل بهبود یافته
+    components.html(
+        f"""
+        {js_code}
+        <style>
+            .likert-wrapper {{
+                width: 100%;
+                max-width: 475px;
+                margin: 0 auto;
+                direction: rtl;
+                position: relative;
+            }}
+            .likert-container {{
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                padding-top: 50px; /* فضای کافی برای لیبل‌ها و خطوط */
+            }}
+            .likert-option {{
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background: white;
+                border: 2px solid #6a0dad;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                margin: 0 3px;
+                transition: all 0.2s;
+                position: relative;
+                z-index: 1;
+            }}
+            .likert-option:hover {{
+                transform: scale(1.1);
+                box-shadow: 0 0 10px rgba(106, 13, 173, 0.4);
+            }}
+            .likert-option.selected {{
+                background: #6a0dad;
+            }}
+            .likert-number {{
+                color: #6a0dad;
+                font-weight: bold;
+                font-size: 16px;
+                user-select: none;
+                transition: all 0.2s;
+            }}
+            .likert-option.selected .likert-number {{
+                color: white;
+            }}
+            .labels-container {{
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                position: absolute;
+                top: 0;
+                direction: rtl;
+            }}
+            .label-container {{
+                font-size: 14px;
+                font-weight: bold;
+                color: #6a0dad;
+                text-align: center;
+                flex: 1;
+                position: relative;
+            }}
+            .label-container span {{
+                display: inline-block;
+                white-space: normal; /* اجازه می‌دهد متن به‌صورت کامل نمایش داده شود */
+                line-height: 1.2; /* فاصله خطوط برای خوانایی بهتر */
+            }}
+            .left-label {{
+                text-align: right;
+                padding-right: 10px;
+            }}
+            .right-label {{
+                text-align: left;
+                padding-left: 10px;
+            }}
+            .middle-label {{
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+            }}
+            /* خطوط ارتباطی فقط از سمت لیبل‌ها */
+            .left-label::before {{
+                content: '';
+                position: absolute;
+                bottom: -30px;
+                right: 10%;
+                width: 2px;
+                height: 25px;
+                background-color: #6a0dad;
+            }}
+            .right-label::before {{
+                content: '';
+                position: absolute;
+                bottom: -30px;
+                left: 10%;
+                width: 2px;
+                height: 25px;
+                background-color: #6a0dad;
+            }}
+            .middle-label::before {{
+                content: '';
+                position: absolute;
+                bottom: -30px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 2px;
+                height: 25px;
+                background-color: #6a0dad;
+            }}
+        </style>
+        <div class='likert-wrapper'>
+            <div class='labels-container'>
+                <div class='label-container left-label'>
+                    <span>{labels[0]}</span>
+                </div>
+                {middle_label}
+                <div class='label-container right-label'>
+                    <span>{labels[1]}</span>
+                </div>
+            </div>
+            <div class="likert-container">
+                {options_html}
+            </div>
+        </div>
+        """,
+        height=120  # ارتفاع برای جا دادن لیبل‌ها و خطوط
     )
 
-    # خط جداکننده بنفش
-    # خط جداکننده بنفش - تعریف استایل و 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)
+    # نمایش وضعیت انتخاب
+    status = f"پاسخ شما: {st.session_state[key]}" if st.session_state.get(key) else "پاسخ شما: هنوز انتخاب نشده"
+    st.markdown(
+        f"""
+        <p style='
+            text-align: right;
+            color: #6a0dad;
+            direction: rtl;
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #f8f0ff;
+            border-radius: 8px;
+            border-right: 3px solid #6a0dad;
+        '>
+            {status}
+        </p>
+        """, 
+        unsafe_allow_html=True
+    )
 
     return st.session_state.get(key)
-
     
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
@@ -1179,7 +1280,7 @@ def attention_check1():
     </style>
     """, unsafe_allow_html=True)
 
-    st.markdown("### سوال")
+    st.markdown("### سؤال")
     
     answer = st.radio(
         "رنگ لوگو اپلیکیشن رهیار و دکمه‌ها در صفحات قبلی چگونه بود؟",
@@ -1239,7 +1340,7 @@ def random_likert_questions():
                     در این بخش، با یک سری سؤال درمورد قیمتی که در صفحه اطلاعات سفر و در زیر نقشه دیدید، مواجه خواهید شد. در زیر سوالات طیفی قرار دارد: <br>
                     - سمت راست (۱): کاملاً نامنصفانه، غیرمعقول یا غیرقابل قبول<br>
                     - سمت چپ (۷): کاملاً منصفانه، معقول یا قابل قبول<br>
-                    لطفاً با دقت عدد مناسب را بین ۱ تا ۷ را با زدن دکمه + و – جعبه زیر طیف انتخاب نمایید. بدین گونه شما انتخاب خواهید کرد که چقدر قیمت به نظرتان منصفانه بوده. چقدر با توجه به شرایط منطقی بوده و چقدر قابل قبول بوده.
+                    لطفاً با دقت عدد مناسب را بین ۱ تا ۷ را انتخاب نمایید. بدین گونه شما انتخاب خواهید کرد که چقدر قیمت به نظرتان منصفانه بوده. چقدر با توجه به شرایط منطقی بوده و چقدر قابل قبول بوده.
                 </p>
             """),
             "questions": [
@@ -1297,7 +1398,7 @@ def random_likert_questions():
                      در این بخش، با یک سری سؤال درمورد توضیحاتی که در صفحه اطلاعات سفر و در زیر نقشه درمورد قیمت به شما ارائه شد، مواجه خواهید شد. در زیر سوالات طیفی قرار دارد: <br>
                     - سمت راست (۱): به هیچ وجه<br>
                     - سمت چپ (۷): خیلی زیاد<br>
-                    لطفاً با دقت عدد مناسب را بین ۱ تا ۷ را با زدن دکمه + و – جعبه زیر طیف انتخاب نمایید. بدین گونه شما انتخاب خواهید کرد که از هیچ مقدار تا خیلی زیاد به چه مقدار به شما توضیح با ویژگی‌های سوال ارائه شده است.
+                    لطفاً با دقت عدد مناسب را بین ۱ تا ۷ را انتخاب نمایید. بدین گونه شما انتخاب خواهید کرد که از هیچ مقدار تا خیلی زیاد به چه مقدار به شما توضیح با ویژگی‌های سوال ارائه شده است.
                 </p>
             """),
             "questions": [
@@ -1309,17 +1410,18 @@ def random_likert_questions():
             ]
         }
     ]
-# مقداردهی اولیه
+    # مقداردهی اولیه
     if 'current_likert_group' not in st.session_state:
         st.session_state.current_likert_group = 0
-    
+        st.session_state.current_question_index = 0
+        st.session_state.show_guide = True
+
     current_group = question_groups[st.session_state.current_likert_group]
-    
-    
-    st.markdown(f"## {current_group['title']}")
-    
-    if 'guide' in current_group:
-        # ترکیب CSS و HTML با جایگذاری امن
+    current_question = current_group['questions'][st.session_state.current_question_index]
+
+    # نمایش راهنما فقط برای اولین سوال هر گروه
+    if st.session_state.show_guide and 'guide' in current_group:
+        st.markdown(f"## {current_group['title']}")
         guide_html = textwrap.dedent("""
             <div class="guide-text" style="
                 display: flex;
@@ -1334,44 +1436,40 @@ def random_likert_questions():
                 {}
             </div>
         """).format(current_group['guide'])
-        
         st.markdown(guide_html, unsafe_allow_html=True)
+    else:
+        st.markdown(f"## {current_group['title']}")
+
+    # نمایش سوال جاری
+    answer = enhanced_likert_scale(current_question)
     
-    # نمایش تمام سوالات این گروه
-    for question in current_group['questions']:
-        answer = enhanced_likert_scale(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):
-        # بررسی آیا همه سوالات این گروه پاسخ داده شده‌اند و هیچ کدام صفر نیستند
-        all_answered = all(
-            question["key"] in st.session_state.answers and 
-            st.session_state.answers[question["key"]] is not None
-            for question in current_group['questions']
-        )
+    # اگر پاسخ داده شد، به سوال بعدی برو
+    if answer is not None:
+        st.session_state.answers[current_question["key"]] = answer
+        st.session_state.show_guide = False
         
-        has_zero = any(
-            st.session_state.answers.get(question["key"]) == 0
-            for question in current_group['questions']
-        )
+        # تاخیر برای نمایش پاسخ قبل از رفتن به سوال بعدی
+        time.sleep(0.5)
         
-        if not all_answered or has_zero:
-            st.error("لطفاً به تمام سوالات این بخش پاسخ دهید")
+        # بررسی آیا سوالات این گروه تمام شده یا نه
+        if st.session_state.current_question_index < len(current_group['questions']) - 1:
+            st.session_state.current_question_index += 1
         else:
-            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_likert_group += 1
+            st.session_state.current_question_index = 0
+            st.session_state.show_guide = True
+            
+            # اگر همه گروه‌ها تمام شدند، به صفحه بعدی برو
+            if st.session_state.current_likert_group >= len(question_groups):
                 st.session_state.current_page = "explanation_questions"
-                st.rerun()
+        
+        st.rerun()
 
 
 def explanation_questions():
     """نمایش سوالات تکمیلی به صورت مرحله‌ای با دکمه ادامه"""
-    st.markdown("### 📋 سوالات تکمیلی")
+    st.markdown("### 📋 سؤالات تکمیلی")
 
     # لیست سوالات به ترتیب نمایش
     questions = [