duplicate

Paused

App Files Files Community

GSMEthesis commited on May 15, 2025

Commit

f6004b5

verified ·

1 Parent(s): 69200f6

Update app.py

Browse files

Files changed (1) hide show

app.py +118 -74

app.py CHANGED Viewed

@@ -772,7 +772,7 @@ body, .stApp {
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با محدوده 0 تا scale و عدم نمایش نقطه برای 0"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -786,86 +786,131 @@ def enhanced_likert_scale(question_data):
     st.markdown(f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{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[1]}</span>
-            <span>{labels[0]}</span>
         </div>
-        <div class="likert-line">
     """
-    # اضافه کردن نقاط فقط برای مقادیر 1 تا scale
-    current_value = st.session_state.get(key, 0)
-    for i in range(1, scale+1):
-        value = scale-i+1  # مقادیر از 1 تا scale
-        active_class = "active" if current_value == value else ""
-        scale_html += f"<div class='likert-dot {active_class}'></div>"
-    scale_html += "</div></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,
@@ -874,9 +919,8 @@ def enhanced_likert_scale(question_data):
         format="%d",
         on_change=lambda: st.session_state.update({key: st.session_state[f"{key}_input"]})
     )
-    # خط جداکننده بنفش
-    # خط جداکننده بنفش - تعریف استایل و HTML با هم
     st.markdown("""
     <style>
         .likert-separator {
@@ -890,7 +934,7 @@ def enhanced_likert_scale(question_data):
     """, unsafe_allow_html=True)
     return st.session_state.get(key)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران

 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
+    """لیکرت اسکیل تعاملی با ارتباط دوطرفه"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
     st.markdown(f"<div style='text-align:center; font-weight:bold; margin-bottom:15px;'>{question}</div>",
                 unsafe_allow_html=True)
+    # ایجاد کامپوننت تعاملی با JavaScript
     scale_html = f"""
+    <!DOCTYPE html>
+    <html>
+    <head>
+        <style>
+            @font-face {{
+                font-family: 'Vazir';
+                src: url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir-Bold.woff2') format('woff2');
+            }}
+            .likert-container {{
+                width: 80%;
+                margin: 0 auto;
+                direction: rtl;
+                font-family: 'Vazir', sans-serif;
+            }}
             .likert-line {{
+                width: 100%;
+                height: 2px;
+                background: #6a0dad;
+                position: relative;
+                margin: 20px 0;
+            }}
+            .likert-dot {{
+                width: 18px;
+                height: 18px;
+                border-radius: 50%;
+                background: white;
+                border: 2px solid #6a0dad;
+                position: absolute;
+                top: -9px;
+                cursor: pointer;
+                transform: translateX(-50%);
+            }}
+            .likert-dot.active {{
+                background: #6a0dad;
             }}
             .likert-labels {{
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 10px;
+                font-weight: bold;
+                color: #6a0dad;
             }}
+            .separator-line {{
+                width: 100%;
+                height: 2px;
+                background: #6a0dad;
+                margin: 20px 0;
+            }}
+        </style>
+    </head>
+    <body>
+        <div class="likert-container">
+            <div class="likert-labels">
+                <span>{labels[1]}</span>
+                <span>{labels[0]}</span>
+            </div>
+            <div class="likert-line" id="likert-line">
+                <!-- نقاط به صورت پویا اضافه خواهند شد -->
+            </div>
         </div>
+        <script>
+            // ایجاد نقاط
+            const line = document.getElementById('likert-line');
+            const scale = {scale};
+            const key = '{key}';
+            // پاک کردن نقاط موجود
+            line.innerHTML = '';
+            // ایجاد نقاط جدید
+            for (let i = 1; i <= scale; i++) {{
+                const dot = document.createElement('div');
+                dot.className = 'likert-dot';
+                dot.dataset.value = i;
+                // محاسبه موقعیت نقطه (از راست به چپ)
+                const position = 100 - ((i - 1) / (scale - 1)) * 100;
+                dot.style.left = `${{position}}%`;
+                // رویداد کل��ک
+                dot.addEventListener('click', () => {{
+                    // حذف کلاس active از همه نقاط
+                    document.querySelectorAll('.likert-dot').forEach(d => {{
+                        d.classList.remove('active');
+                    }});
+                    // اضافه کردن کلاس active به نقطه انتخاب شده
+                    dot.classList.add('active');
+                    // ارسال مقدار به Streamlit
+                    parent.window.streamlitBridge.setComponentValue({{
+                        key: key,
+                        value: i
+                    }});
+                }});
+                line.appendChild(dot);
+            }}
+            // علامت گذاری نقطه انتخاب شده (اگر وجود دارد)
+            const currentValue = {st.session_state.get(key, 0)};
+            if (currentValue > 0) {{
+                const dot = document.querySelector(`.likert-dot[data-value="${{currentValue}}"]`);
+                if (dot) dot.classList.add('active');
+            }}
+        </script>
+    </body>
+    </html>
     """
+    # نمایش کامپوننت و دریافت مقدار
+    value = components.html(scale_html, height=120, key=f"{key}_component")
+    # به روز رسانی مقدار در session_state اگر مقدار جدید دریافت شده باشد
+    if value and isinstance(value, dict) and value.get("key") == key:
+        st.session_state[key] = value["value"]
+        st.experimental_rerun()
+    # نمایش ورودی عددی برای ویرایش دستی
     value = st.number_input(
         "پاسخ شما (از 1 تا 7):",
+        min_value=0,
         max_value=scale,
         value=st.session_state.get(key, 0),
         step=1,
         format="%d",
         on_change=lambda: st.session_state.update({key: st.session_state[f"{key}_input"]})
     )
+    # خط جداکننده
     st.markdown("""
     <style>
         .likert-separator {
     """, unsafe_allow_html=True)
     return st.session_state.get(key)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران