Update app.py

app.py

@@ -783,33 +783,31 @@ def enhanced_likert_scale(question_data):
     st.markdown(f"<div style='text-align:right; font-weight:bold; margin-bottom:15px; direction: rtl;'>{question}</div>", 
                 unsafe_allow_html=True)
 
-    # ایجاد محتوای HTML برای برچسب‌ها
-    labels_html = f"""
-    <div style='display: flex; justify-content: space-between; max-width: 475px; margin: 0 auto 25px; direction: rtl; position: relative; height: 30px;'>
-        <div style='position: absolute; right: 0; text-align: center;'>
-            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>{labels[0]}</span>
-            <div style='height: 15px; width: 2px; background: #6a0dad; margin: 2px auto;'></div>
-        </div>
-    """
-    
+    # نمایش برچسب‌ها با خطوط ارتباطی
+    middle_label = ""
     if scale % 2 == 1:  # اگر مقیاس فرد باشد
-        labels_html += """
-        <div style='position: absolute; left: 50%; transform: translateX(-50%); text-align: center;'>
-            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>متوسط</span>
-            <div style='height: 15px; width: 2px; background: #6a0dad; margin: 2px auto;'></div>
-        </div>
+        middle_value = (scale // 2) + 1
+        middle_label = f"""
+            <div class='label-container middle-label' style='left: 50%; transform: translateX(-50%);'>
+                <span>متوسط</span>
+            </div>
         """
     
-    labels_html += f"""
-        <div style='position: absolute; left: 0; text-align: center;'>
-            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>{labels[1]}</span>
-            <div style='height: 15px; width: 2px; background: #6a0dad; margin: 2px auto;'></div>
+    # ایجاد ساختار HTML برای برچسب‌ها
+    st.markdown(
+        f"""
+        <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>
-    """
-    
-    # نمایش برچسب‌ها
-    st.markdown(labels_html, unsafe_allow_html=True)
+        """,
+        unsafe_allow_html=True
+    )
 
     # رادیو باتن اصلی (مخفی)
     selected_value = st.radio(
@@ -849,26 +847,14 @@ def enhanced_likert_scale(question_data):
     </script>
     """
     
-    # ایجاد دکمه‌های سفارشی با خطوط راهنما
-    options_html = []
-    for i in range(scale):
-        is_selected = st.session_state.get(key) == i+1
-        is_first = i+1 == 1
-        is_last = i+1 == scale
-        is_middle = scale % 2 == 1 and i+1 == (scale // 2) + 1
-        
-        option_html = f"""
-        <div class="likert-option-container" style="position: relative;">
-            <div class="likert-option {'selected' if is_selected else ''}" 
-                 onclick="handleLikertClick({i})">
-                <span class="likert-number">{i+1}</span>
-            </div>
-            {'<div class="likert-guide-line"></div>' if is_first or is_last or is_middle else ''}
-        </div>
-        """
-        options_html.append(option_html)
-    
-    options_html = "".join(options_html)
+    # ایجاد دکمه‌های سفارشی با استایل بهبود یافته
+    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)
+    ])
 
     # ترکیب تمام بخش‌ها با استایل بهبود یافته
     components.html(
@@ -883,11 +869,7 @@ def enhanced_likert_scale(question_data):
                 margin: 0 auto;
                 direction: rtl;
                 position: relative;
-            }}
-            .likert-option-container {{
-                display: flex;
-                flex-direction: column;
-                align-items: center;
+                padding-top: 40px; /* فضای کافی برای خطوط و لیبل‌ها */
             }}
             .likert-option {{
                 width: 36px;
@@ -902,7 +884,7 @@ def enhanced_likert_scale(question_data):
                 margin: 0 3px;
                 transition: all 0.2s;
                 position: relative;
-                z-index: 2;
+                z-index: 1;
             }}
             .likert-option:hover {{
                 transform: scale(1.1);
@@ -921,20 +903,96 @@ def enhanced_likert_scale(question_data):
             .likert-option.selected .likert-number {{
                 color: white;
             }}
-            .likert-guide-line {{
+            .labels-container {{
+                display: flex;
+                justify-content: space-between;
+                width: 100%;
+                max-width: 475px;
+                margin: 0 auto 10px;
+                position: relative;
+                direction: rtl;
+            }}
+            .label-container {{
+                position: relative;
+                font-size: 14px;
+                font-weight: bold;
+                color: #6a0dad;
+                text-align: center;
+            }}
+            .label-container span {{
+                display: inline-block;
+            }}
+            /* خطوط ارتباطی */
+            .left-label::before {{
+                content: '';
                 position: absolute;
-                bottom: -25px;
-                height: 15px;
+                bottom: -30px;
+                right: 50%;
+                transform: translateX(50%);
                 width: 2px;
-                background: #6a0dad;
-                z-index: 1;
+                height: 25px;
+                background-color: #6a0dad;
+            }}
+            .right-label::before {{
+                content: '';
+                position: absolute;
+                bottom: -30px;
+                left: 50%;
+                transform: translateX(-50%);
+                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;
+            }}
+            /* تنظیم موقعیت خطوط برای گزینه‌های مقیاس */
+            .likert-option:nth-child(1)::before {{
+                content: '';
+                position: absolute;
+                top: -25px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 2px;
+                height: 25px;
+                background-color: #6a0dad;
+                z-index: 0;
+            }}
+            .likert-option:nth-child({scale})::before {{
+                content: '';
+                position: absolute;
+                top: -25px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 2px;
+                height: 25px;
+                background-color: #6a0dad;
+                z-index: 0;
+            }}
+            .likert-option.middle-option::before {{
+                content: '';
+                position: absolute;
+                top: -25px;
+                left: 50%;
+                transform: translateX(-50%);
+                width: 2px;
+                height: 25px;
+                background-color: #6a0dad;
+                z-index: 0;
             }}
         </style>
         <div class="likert-container">
             {options_html}
         </div>
         """,
-        height=100  # افزایش ارتفاع برای جا دادن خطوط راهنما
+        height=110  # افزایش ارتفاع برای جا دادن خطوط و لیبل‌ها
     )
 
     # نمایش وضعیت انتخاب با استایل بهبود یافته
@@ -945,7 +1003,7 @@ def enhanced_likert_scale(question_data):
             text-align: right;
             color: #6a0dad;
             direction: rtl;
-            margin-top: 30px;
+            margin-top: 20px;
             padding: 10px;
             background-color: #f8f0ff;
             border-radius: 8px;