Update app.py

app.py

@@ -783,18 +783,37 @@ 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)
 
-    # نمایش برچسب‌ها (با برچسب وسط اگر مقیاس فرد باشد)
+    # نمایش برچسب‌ها با خطوط راهنما
     middle_label = ""
     if scale % 2 == 1:  # اگر مقیاس فرد باشد
         middle_value = (scale // 2) + 1
-        middle_label = "<span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>متوسط</span>"
+        middle_label = f"""
+        <div style='position: absolute; left: 50%; transform: translateX(-50%);'>
+            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>متوسط</span>
+            <div style='height: 15px; width: 2px; background: #6a0dad; margin: 2px auto;'></div>
+        </div>
+        """
     
     st.markdown(
         f"""
-        <div style='display: flex; justify-content: space-between; max-width: 475px; margin: 0 auto 10px; direction: rtl;'>
-            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>{labels[0]}</span>
+        <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}
-            <span style='font-size: 14px; font-weight: bold; color: #6a0dad;'>{labels[1]}</span>
+            <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>
+            </div>
         </div>
         """,
         unsafe_allow_html=True
@@ -838,12 +857,15 @@ def enhanced_likert_scale(question_data):
     </script>
     """
     
-    # ایجاد دکمه‌های سفارشی با استایل بهبود یافته
+    # ایجاد دکمه‌های سفارشی با خطوط راهنما
     options_html = "".join([
+        f'<div class="likert-option-container" style="position: relative;">'
         f'<div class="likert-option {"selected" if st.session_state.get(key) == i+1 else ""}" '
         f'onclick="handleLikertClick({i})">'
         f'<span class="likert-number">{i+1}</span>'
-        '</div>'
+        f'</div>'
+        f'{"<div class=\'likert-guide-line\'></div>" if i+1 == 1 or i+1 == scale or (scale % 2 == 1 and i+1 == Math.ceil(scale/2)) else ""}'
+        f'</div>'
         for i in range(scale)
     ])
 
@@ -859,6 +881,12 @@ def enhanced_likert_scale(question_data):
                 max-width: 475px;
                 margin: 0 auto;
                 direction: rtl;
+                position: relative;
+            }}
+            .likert-option-container {{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
             }}
             .likert-option {{
                 width: 36px;
@@ -873,6 +901,7 @@ def enhanced_likert_scale(question_data):
                 margin: 0 3px;
                 transition: all 0.2s;
                 position: relative;
+                z-index: 2;
             }}
             .likert-option:hover {{
                 transform: scale(1.1);
@@ -891,22 +920,20 @@ def enhanced_likert_scale(question_data):
             .likert-option.selected .likert-number {{
                 color: white;
             }}
-            /* برچسب وسط برای گزینه میانی */
-            .likert-option.middle-option::after {{
-                content: "متوسط";
+            .likert-guide-line {{
                 position: absolute;
                 bottom: -25px;
-                font-size: 12px;
-                color: #6a0dad;
-                white-space: nowrap;
-                font-weight: bold;
+                height: 15px;
+                width: 2px;
+                background: #6a0dad;
+                z-index: 1;
             }}
         </style>
         <div class="likert-container">
             {options_html}
         </div>
         """,
-        height=70  # افزایش ارتفاع برای جا دادن برچسب وسط
+        height=100  # افزایش ارتفاع برای جا دادن خطوط راهنما
     )
 
     # نمایش وضعیت انتخاب با استایل بهبود یافته
@@ -917,7 +944,7 @@ def enhanced_likert_scale(question_data):
             text-align: right;
             color: #6a0dad;
             direction: rtl;
-            margin-top: 20px;
+            margin-top: 30px;
             padding: 10px;
             background-color: #f8f0ff;
             border-radius: 8px;