Update app.py

app.py

@@ -739,7 +739,7 @@ h3 {
 
 # ========== توابع اصلی ==========
 def enhanced_likert_scale(question_data):
-    """لیکرت اسکیل با دکمه‌های کاملاً HTML و منطق Streamlit"""
+    """لیکرت اسکیل با دکمه‌های کاملاً HTML و منطق حداقل Streamlit"""
     question = question_data["question"]
     key = question_data["key"]
     scale = question_data["scale"]
@@ -748,6 +748,8 @@ def enhanced_likert_scale(question_data):
     # مقداردهی اولیه
     if key not in st.session_state:
         st.session_state[key] = None
+    if f"{key}_temp" not in st.session_state:
+        st.session_state[f"{key}_temp"] = st.session_state[key] or None
     
     # استایل‌دهی و ساختار HTML
     html_content = f"""
@@ -791,7 +793,7 @@ def enhanced_likert_scale(question_data):
             justify-content: center !important;
             cursor: pointer !important;
             transition: all 0.3s ease !important;
-            font-size:金属
+            font-size: 18px !important;
             color: #6a0dad !important;
         }}
         .likert-btn.selected {{
@@ -811,6 +813,23 @@ def enhanced_likert_scale(question_data):
             margin-top: 10px !important;
             font-size: 16px !important;
         }}
+        /* دکمه تأیید */
+        .confirm-btn {{
+            background-color: #6a0dad !important;
+            color: white !important;
+            border: none !important;
+            border-radius: 8px !important;
+            padding: 10px 20px !important;
+            font-weight: bold !important;
+            cursor: pointer !important;
+            margin-top: 15px !important;
+            transition: all 0.3s ease !important;
+        }}
+        .confirm-btn:hover {{
+            background-color: #5a0a96 !important;
+            transform: translateY(-1px) !important;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
+        }}
     </style>
     <div class="likert-container">
         <div class="likert-question">{question}</div>
@@ -818,49 +837,57 @@ def enhanced_likert_scale(question_data):
             <span style="text-align:right">{labels[0]}</span>
             <span style="text-align:left">{labels[1]}</span>
         </div>
-        <div class="likert-buttons">
+        <div class="likert-buttons" id="likert-buttons-{key}">
     """
     
     # افزودن دکمه‌های HTML
     for i in range(scale):
         value = scale - i  # 7 تا 1
-        is_selected = st.session_state.get(key) == value
+        is_selected = st.session_state[f"{key}_temp"] == value
         html_content += f"""
             <button class="likert-btn {'selected' if is_selected else ''}"
-                    onclick="document.getElementById('hidden-btn-{key}-{value}').click()">
+                    onclick="selectLikert('{key}', {value})">
                 {'•' if is_selected else '○'}
             </button>
         """
     
-    html_content += """
+    html_content += f"""
+        </div>
+        <div class="likert-response" id="likert-response-{key}">
+            پاسخ شما: {st.session_state[f"{key}_temp"] or "هیچکدام"}
         </div>
+        <button class="confirm-btn" onclick="confirmSelection('{key}')">
+            تأیید
+        </button>
     </div>
+    <script>
+        function selectLikert(key, value) {{
+            // به‌روزرسانی متغیر موقت
+            window.sessionStorage.setItem('{key}_temp', value);
+            // به‌روزرسانی استایل دکمه‌ها
+            const buttons = document.querySelectorAll('#likert-buttons-{key} .likert-btn');
+            buttons.forEach(btn => btn.classList.remove('selected'));
+            event.currentTarget.classList.add('selected');
+            // به‌روزرسانی متن پاسخ
+            document.getElementById('likert-response-{key}').innerText = 'پاسخ شما: ' + value;
+        }}
+        function confirmSelection(key) {{
+            // فعال کردن دکمه مخفی Streamlit
+            document.getElementById('confirm-btn-{key}').click();
+        }}
+    </script>
     """
     
     # رندر HTML
-    components.html(html_content, height=200)
+    components.html(html_content, height=250)
     
-    # ایجاد دکمه‌های مخفی Streamlit برای مدیریت کلیک‌ها
-    for i in range(scale):
-        value = scale - i
-        if st.button(
-            "hidden",
-            key=f"hidden-btn-{key}-{value}",
-            help=str(value),
-            type="secondary",
-            use_container_width=True
-        ):
-            st.session_state[key] = value
+    # دکمه مخفی Streamlit برای ثبت نهایی
+    if st.button("Confirm", key=f"confirm-btn-{key}", help="Hidden confirm button", type="secondary", use_container_width=True):
+        temp_value = st.session_state.get(f"{key}_temp")
+        if temp_value is not None:
+            st.session_state[key] = temp_value
             st.rerun()
     
-    # ��مایش پاسخ انتخاب‌شده
-    if st.session_state.get(key) is not None:
-        st.markdown(f"""
-        <div class="likert-response">
-            پاسخ شما: {st.session_state[key]}
-        </div>
-        """, unsafe_allow_html=True)
-    
     return st.session_state.get(key)
     
 def create_ride_map():