Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,69 +1,153 @@
+# import streamlit as st
+# from riddles import load_riddles, get_random_riddle
+
+# # Loading CSS from file
+# def load_css(file_name):
+#     with open(file_name) as f:
+#         css = f.read()
+#     st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
+    
+# load_css('src/css/style.css')
+
+# # Loading  riddles
+# riddles = load_riddles()
+
+# # Checking if riddles loaded
+# if not riddles:
+#     st.write("No riddles found. Please check your CSV file.")
+# else:
+#     # Initializing session state variables
+#     if "riddle" not in st.session_state:
+#         st.session_state.riddle = get_random_riddle(riddles)
+#         st.session_state.hint_shown = False
+#         st.session_state.answer_shown = False
+#         st.session_state.user_answer_key = 0  
+
+#     # Displaying the riddle
+#     st.header("Lets Riddle")
+#     st.write(st.session_state.riddle['Riddle'])
+    
+
+#     # Users input
+#     user_answer = st.text_input("Your answer is :",placeholder="Type Your Answer Here", key=f"user_answer_{st.session_state.user_answer_key}")
+
+#     # Buttons submit , hint , reveal 
+#     col1, col2, col3 = st.columns(3)
+#     with col1:
+#         if st.button("Submit"):
+#             if user_answer.strip().lower() == st.session_state.riddle['Answer'].lower():
+#                 st.write("Correct! Well done!")
+#             else:
+#                 st.write("Incorrect, ask for a hint")
+        
+#     with col2:
+#         if st.button("Hint"):
+#             if not st.session_state.hint_shown:
+#                 st.write(f"Hint:    {st.session_state.riddle['Hint']}")
+#                 st.session_state.hint_shown = True
+#             else:
+#                 st.write("Hint already shown.")
+
+#     with col3:
+#         if st.button("Reveal"):
+#             if not st.session_state.answer_shown:
+#                 st.write(f"The answer is: {st.session_state.riddle['Answer']}")
+#                 st.session_state.answer_shown = True
+#             else:
+#                 st.write("Answer already revealed.")
+
+#     #Next riddle
+#     st.write("")  
+#     # Center the button by using a three-column layout
+#     col_center = st.columns([1, 1, 1])[1]  
+#     with col_center:
+#         if st.button("Next"):
+#             st.session_state.riddle = get_random_riddle(riddles)
+#             st.session_state.hint_shown = False
+#             st.session_state.answer_shown = False
+#             st.session_state.user_answer_key += 1  # Increment key to reset input
+#             st.rerun()
+
 import streamlit as st
 from riddles import load_riddles, get_random_riddle
 
-# Loading CSS from file
+# Load custom CSS
 def load_css(file_name):
     with open(file_name) as f:
         css = f.read()
     st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
-    
+
 load_css('src/css/style.css')
 
-# Loading  riddles
+# Load riddles from CSV
 riddles = load_riddles()
 
-# Checking if riddles loaded
+# Check if riddles loaded
 if not riddles:
     st.write("No riddles found. Please check your CSV file.")
 else:
-    # Initializing session state variables
+    # Initialize session state
     if "riddle" not in st.session_state:
         st.session_state.riddle = get_random_riddle(riddles)
         st.session_state.hint_shown = False
         st.session_state.answer_shown = False
-        st.session_state.user_answer_key = 0  
+        st.session_state.user_answer_key = 0
 
-    # Displaying the riddle
-    st.header("Lets Riddle")
+    st.header("Let's Riddle!")
     st.write(st.session_state.riddle['Riddle'])
-    
 
-    # Users input
-    user_answer = st.text_input("Your answer is :",placeholder="Type Your Answer Here", key=f"user_answer_{st.session_state.user_answer_key}")
+    # Input for user's answer
+    user_answer = st.text_input(
+        "Your answer is:",
+        placeholder="Type Your Answer Here",
+        key=f"user_answer_{st.session_state.user_answer_key}"
+    )
 
-    # Buttons submit , hint , reveal 
+    # Create empty containers to dynamically update content
+    feedback_container = st.empty()
+    hint_container = st.empty()
+    answer_container = st.empty()
+
+    # Layout: Submit, Hint, Reveal buttons
     col1, col2, col3 = st.columns(3)
     with col1:
         if st.button("Submit"):
             if user_answer.strip().lower() == st.session_state.riddle['Answer'].lower():
-                st.write("Correct! Well done!")
+                feedback_container.write("✅ Correct! Well done!")
             else:
-                st.write("Incorrect, ask for a hint")
-        
+                feedback_container.write("❌ Incorrect. Try asking for a hint!")
+
     with col2:
         if st.button("Hint"):
             if not st.session_state.hint_shown:
-                st.write(f"Hint:    {st.session_state.riddle['Hint']}")
+                hint_container.write(f"💡 Hint: {st.session_state.riddle['Hint']}")
                 st.session_state.hint_shown = True
             else:
-                st.write("Hint already shown.")
+                hint_container.write("Hint already shown.")
 
     with col3:
         if st.button("Reveal"):
+            # Clear the hint when answer is shown
+            if st.session_state.hint_shown:
+                hint_container.empty()
             if not st.session_state.answer_shown:
-                st.write(f"The answer is: {st.session_state.riddle['Answer']}")
+                answer_container.write(f"🟢 The answer is: {st.session_state.riddle['Answer']}")
                 st.session_state.answer_shown = True
             else:
-                st.write("Answer already revealed.")
+                answer_container.write("Answer already revealed.")
 
-    #Next riddle
-    st.write("")  
-    # Center the button by using a three-column layout
-    col_center = st.columns([1, 1, 1])[1]  
+    # 'Next' button centered
+    col_center = st.columns([1, 1, 1])[1]
     with col_center:
         if st.button("Next"):
             st.session_state.riddle = get_random_riddle(riddles)
             st.session_state.hint_shown = False
             st.session_state.answer_shown = False
-            st.session_state.user_answer_key += 1  # Increment key to reset input
-            st.rerun()
+            st.session_state.user_answer_key += 1
+
+            # Clear all previous outputs
+            feedback_container.empty()
+            hint_container.empty()
+            answer_container.empty()
+
+            st.rerun()