Update app.py

app.py

@@ -207,6 +207,51 @@ def display_math_content(content):
     st.markdown(f'<div class="math-container">{formatted_content}</div>', unsafe_allow_html=True)
     
 # 추가 
+# def add_custom_css():
+#     st.markdown(
+#         """
+#         <style>
+#             .problem-header {
+#                 color: #FF6B6B;
+#                 font-size: 24px;
+#                 font-weight: bold;
+#                 margin-bottom: 20px;
+#             }
+
+#             .math-container {
+#                 background-color: #f9f9f9;
+#                 padding: 20px;
+#                 border-radius: 10px;
+#                 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+#                 margin-bottom: 20px;
+#             }
+
+#             .options-container {
+#                 display: grid;
+#                 grid-template-columns: 1fr 1fr;
+#                 gap: 20px;
+#             }
+
+#             .option {
+#                 background-color: white;
+#                 border: 1px solid #ddd;
+#                 border-radius: 8px;
+#                 padding: 15px;
+#                 text-align: center;
+#                 font-size: 18px;
+#                 cursor: pointer;
+#                 transition: background-color 0.3s;
+#             }
+
+#             .option:hover {
+#                 background-color: #f8f9fa;
+#             }
+#         </style>
+#         """,
+#         unsafe_allow_html=True
+#     )
+
+# 2250 
 def add_custom_css():
     st.markdown(
         """
@@ -217,54 +262,72 @@ def add_custom_css():
                 font-weight: bold;
                 margin-bottom: 20px;
             }
-
             .math-container {
-                background-color: #f9f9f9;
-                padding: 20px;
-                border-radius: 10px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                margin-bottom: 20px;
-            }
-
-            .options-container {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                gap: 20px;
-            }
-
-            .option {
-                background-color: white;
-                border: 1px solid #ddd;
-                border-radius: 8px;
-                padding: 15px;
-                text-align: center;
-                font-size: 18px;
-                cursor: pointer;
-                transition: background-color 0.3s;
+                background-color: #f0f8ff;
+                padding: 15px 20px;
+                border-radius: 5px;
+                margin: 5px 0;
             }
-
-            .option:hover {
-                background-color: #f8f9fa;
+            button {
+                color: #0066ff;
+                font-weight: 500;
             }
         </style>
         """,
         unsafe_allow_html=True
     )
+# 2250
+# def display_question(question, answers):
+#     """Display question and options with LaTeX formatting"""
+#     st.markdown('<div class="problem-header">Problem:</div>', unsafe_allow_html=True)
+#     display_math_content(question)
+    
+#     col1, col2 = st.columns(2)
+#     for i, (col, opt) in enumerate([(col1, 'A'), (col1, 'C'), (col2, 'B'), (col2, 'D')]):
+#         with col:
+#             st.markdown(f"### {opt})")
+#             display_option_content(answers[opt])
+#             if st.button("선택", key=f"btn_{opt}"):
+#                 handle_answer(opt, st.session_state.questions.iloc[st.session_state.current_question_index])
+#                 st.rerun()
 
 def display_question(question, answers):
     """Display question and options with LaTeX formatting"""
     st.markdown('<div class="problem-header">Problem:</div>', unsafe_allow_html=True)
     display_math_content(question)
     
-    col1, col2 = st.columns(2)
-    for i, (col, opt) in enumerate([(col1, 'A'), (col1, 'C'), (col2, 'B'), (col2, 'D')]):
-        with col:
-            st.markdown(f"### {opt})")
-            display_option_content(answers[opt])
-            if st.button("선택", key=f"btn_{opt}"):
-                handle_answer(opt, st.session_state.questions.iloc[st.session_state.current_question_index])
-                st.rerun()
-                
+    # Add custom CSS for options
+    st.markdown("""
+        <style>
+        .option-container {
+            background-color: #f0f8ff;
+            padding: 10px 20px;
+            margin: 5px 0;
+            border-radius: 5px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .option-text {
+            color: #0066ff;
+            font-weight: 500;
+            width: 30px;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+    
+    # Display options
+    for opt in ['A', 'B', 'C', 'D']:
+        with st.container():
+            col1, col2 = st.columns([1, 11])
+            with col1:
+                if st.button(f"{opt}.", key=f"btn_{opt}", help="Click to select"):
+                    handle_answer(opt, st.session_state.questions.iloc[st.session_state.current_question_index])
+                    st.rerun()
+            with col2:
+                display_option_content(answers[opt])
+
 def display_option_content(option_text):
     """Process and display option content with LaTeX formatting"""
     from pylatexenc.latex2text import LatexNodes2Text
@@ -292,6 +355,7 @@ def main():
     
     # Generator 초기화
     generator = load_question_generator()
+    add_custom_css()
 
     # 초기 화면
     if st.session_state.current_step == 'initial':