Update app.py

app.py

@@ -739,27 +739,52 @@ h3 {
 
 # ========== توابع اصلی ==========
 
+
 def custom_likert_slider(question_data):
-    """Radio buttons for Likert-style question"""
+    """Custom Likert-style question with circles and labels."""
     question = question_data["question"]
     key = question_data["key"]
-    labels = question_data.get("labels", ["کمترین", "بیشترین"])
+    scale = question_data["scale"]
+    labels = question_data.get("labels", ["کمترین", "بیشترین"])  # Default labels
     
-    # Options for the Likert scale
-    options = [str(i) for i in range(1, 6)]  # Example for a 5-point Likert scale
-
-    # Default value from session_state
-    default_value = st.session_state.get(key, "3")  # Default is the middle value
-
-    # Radio button UI for Likert scale
-    selected_value = st.radio(question, options, index=options.index(default_value), key=key)
+    # Default value (middle of the scale)
+    default_value = st.session_state.get(key, (scale + 1) // 2)
     
-    # Display the selected value
-    st.write(f"انتخاب شده: {selected_value}")
+    # HTML and CSS for custom Likert scale with radio buttons (styled as circles)
+    html = f"""
+    <div style="direction: ltr; font-family: 'B Nazanin'; margin-bottom: 30px;">
+        <label style="font-size: 16px; font-weight: bold; display: block; text-align: center;">{question}</label>
+        <div style="display: flex; justify-content: center; align-items: center; gap: 10px; margin: 10px 0;">
+            <span>{labels[0]}</span>
+            <div style="display: flex; gap: 10px;">
+                <input type="radio" id="radio_{key}_1" name="{key}" value="1" style="width: 30px; height: 30px;" {'checked' if default_value == 1 else ''} onclick="updateSlider(1, '{key}')">
+                <input type="radio" id="radio_{key}_2" name="{key}" value="2" style="width: 30px; height: 30px;" {'checked' if default_value == 2 else ''} onclick="updateSlider(2, '{key}')">
+                <input type="radio" id="radio_{key}_3" name="{key}" value="3" style="width: 30px; height: 30px;" {'checked' if default_value == 3 else ''} onclick="updateSlider(3, '{key}')">
+                <input type="radio" id="radio_{key}_4" name="{key}" value="4" style="width: 30px; height: 30px;" {'checked' if default_value == 4 else ''} onclick="updateSlider(4, '{key}')">
+                <input type="radio" id="radio_{key}_5" name="{key}" value="5" style="width: 30px; height: 30px;" {'checked' if default_value == 5 else ''} onclick="updateSlider(5, '{key}')">
+            </div>
+            <span>{labels[1]}</span>
+        </div>
+    </div>
+
+    <script>
+    function updateSlider(value, key) {{
+        // Send the value back to Streamlit
+        window.parent.postMessage({{
+            type: 'streamlit:setComponentValue',
+            key: key,
+            value: value
+        }}, '*');
+    }}
+    </script>
+    """
     
-    # Save the selected value to session_state
-    st.session_state[key] = selected_value
-    return selected_value
+    # Render the HTML and JavaScript in the Streamlit app
+    components.html(html, height=200)
+
+    # Return the value stored in session state, initially set to default value
+    slider_value = st.session_state.get(key, default_value)
+    return slider_value
     
 def create_ride_map():
     """ایجاد نقشه سفر با Folium - نسخه اصلاح شده با مناطق عمومی"""