study2

Running

App Files Files Community

GSMEthesis commited on May 15, 2025

Commit

0338218

verified ·

1 Parent(s): 8626f4b

Update app.py

Browse files

Files changed (1) hide show

app.py +84 -138

app.py CHANGED Viewed

@@ -772,12 +772,9 @@ body, .stApp {
 """, unsafe_allow_html=True)
 # ========== توابع اصلی ==========
-import streamlit as st
-from streamlit.components.v1 import html as components_html
-import json
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل کاملاً تعاملی با هماهنگی کامل بین نقاط و عدد"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -791,126 +788,97 @@ 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/JS برای بخش تعاملی
     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%);
-                transition: all 0.3s ease;
-            }}
-            .likert-dot:hover {{
-                transform: translateX(-50%) scale(1.2);
-            }}
-            .likert-dot.active {{
-                background: #6a0dad;
             }}
             .likert-labels {{
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 10px;
-                font-weight: bold;
-                color: #6a0dad;
             }}
-        </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 currentValue = {st.session_state.get(key, 0)};
-            // ایجاد نقاط
-            line.innerHTML = '';
-            for (let i = 1; i <= scale; i++) {{
-                const dot = document.createElement('div');
-                dot.className = 'likert-dot' + (i === currentValue ? ' active' : '');
-                dot.dataset.value = i;
-                // محاسبه موقعیت نقطه
-                const position = 100 - ((i - 1) / (scale - 1)) * 100;
-                dot.style.left = `${{position}}%`;
-                // رویداد کلیک
-                dot.addEventListener('click', () => {{
-                    // به روزرسانی ظاهر
-                    document.querySelectorAll('.likert-dot').forEach(d => {{
-                        d.classList.remove('active');
-                    }});
-                    dot.classList.add('active');
-                    // ارسال مقدار به Streamlit
-                    const value = parseInt(dot.dataset.value);
-                    window.parent.postMessage({{
-                        type: 'likertValueChanged',
-                        key: '{key}',
-                        value: value
-                    }}, '*');
-                }});
-                line.appendChild(dot);
-            }}
-        </script>
-    </body>
-    </html>
     """
-    # نمایش کامپوننت با استفاده از components.html
-    components_html(scale_html, height=120)
-    # ایجاد input عددی هماهنگ
-    col1, col2 = st.columns([3, 1])
-    with col2:
-        value = st.number_input(
-            "مقدار انتخاب شده:",
-            min_value=0,
-            max_value=scale,
-            value=st.session_state.get(key, 0),
-            step=1,
-            key=f"{key}_input",
-            on_change=lambda: st.session_state.update({key: st.session_state[f"{key}_input"]})
-        )
-    # خط جداکننده
     st.markdown("""
     <style>
         .likert-separator {
@@ -922,30 +890,8 @@ def enhanced_likert_scale(question_data):
     </style>
     <div class="likert-separator"></div>
     """, unsafe_allow_html=True)
-    # گوش دادن به تغییرات از JS
-    js_value = st.session_state.get(f"js_{key}")
-    if js_value is not None:
-        st.session_state[key] = js_value
-        st.session_state[f"{key}_input"] = js_value
-        del st.session_state[f"js_{key}"]
-        st.experimental_rerun()
-    return st.session_state.get(key, 0)
-# کد JavaScript برای ارتباط با Streamlit (در بخش head صفحه اصلی)
-st.markdown("""
-<script>
-    window.addEventListener('message', function(event) {
-        if (event.data.type === 'likertValueChanged') {
-            const {key, value} = event.data;
-            Streamlit.setComponentValue({key: `js_${key}`, value: value});
-        }
-    });
-</script>
-""", unsafe_allow_html=True)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران

 """, unsafe_allow_html=True)
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
+    """لیکرت اسکیل با محدوده 0 تا scale و عدم نمایش نقطه برای 0"""
     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)
+    # ایجاد خط و نقاط با 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">
     """
+    # اضافه کردن نقاط فقط برای مقادیر 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>"
+    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,
+        key=f"{key}_input",
+        placeholder="0 (پاسخ نداده) یا 1-7",
+        format="%d",
+        on_change=lambda: st.session_state.update({key: st.session_state[f"{key}_input"]})
+    )
+    # خط جداکننده بنفش
+    # خط جداکننده بنفش - تعریف استایل و HTML با هم
     st.markdown("""
     <style>
         .likert-separator {
     </style>
     <div class="likert-separator"></div>
     """, unsafe_allow_html=True)
+    return st.session_state.get(key)
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""
     # نقاط تقریبی برای مناطق عمومی جنوب و غرب تهران