Update app.py

app.py

@@ -1,16 +1,15 @@
 import streamlit as st
-import streamlit.components.v1 as components
 
 # Set up the layout of the app
 st.title("Intro to Python: Interactive Learning")
-st.write("Welcome to the Python learning platform. Below are key examples to help you get started with Python programming.")
+st.write("Welcome to the Python learning platform! Explore the core concepts of Python programming with practical examples, and test them interactively.")
 
-# Helper function to create an expandable explanation
+# Helper function to create an expanded explanation
 def create_explanation(title, content):
     with st.expander(f"Explanation: {title}"):
-        st.write(content)
+        st.markdown(content)
 
-# Example 1: Basic Syntax and Variables
+# 1. Basic Syntax and Variables
 st.subheader("1. Basic Syntax and Variables")
 code1 = '''name = "Alice"
 age = 25
@@ -19,9 +18,29 @@ height = 5.6
 print(f"My name is {name}, I am {age} years old and {height} feet tall.")
 '''
 st.code(code1, language="python")
-create_explanation("Basic Syntax", "This example shows how to assign values to variables, different data types, and how to print a formatted string.")
 
-# Example 2: If-Else Condition
+create_explanation("Basic Syntax and Variables", """
+In this example, we introduce **variables**, which are placeholders for storing data in Python. We create three variables:
+- `name` stores a string (`"Alice"`),
+- `age` stores an integer (`25`),
+- `height` stores a float (`5.6`).
+
+Next, we use **formatted string literals** (also known as f-strings) to combine these variables into a sentence and print it. The `print()` function outputs the message to the console. This is the fundamental way of creating variables and displaying information in Python.
+""")
+
+# Try it yourself box
+st.write("### Try it Yourself:")
+user_code1 = st.text_area("Example 1: Paste or modify the code and hit 'Run' to see the output.", value=code1, height=150, key="1")
+
+if st.button("Run Example 1 Code"):
+    try:
+        exec_locals = {}
+        exec(user_code1, {}, exec_locals)
+        st.success("Code ran successfully!")
+    except Exception as e:
+        st.error(f"Error: {str(e)}")
+
+# 2. Control Flow: If-Else Statements
 st.subheader("2. Control Flow: If-Else Statements")
 code2 = '''temperature = 30
 
@@ -31,9 +50,29 @@ else:
     print("It's a cool day.")
 '''
 st.code(code2, language="python")
-create_explanation("If-Else", "This example demonstrates how to use conditional logic in Python to make decisions based on conditions.")
 
-# Example 3: For and While Loops
+create_explanation("Control Flow: If-Else Statements", """
+**Control flow** allows you to make decisions in your code using conditions. The `if-else` statement checks if a condition is true:
+- In this example, the condition is whether `temperature` is greater than `25`.
+- If the condition is true, Python will execute the first block of code (`print("It's a hot day.")`).
+- If the condition is false, Python executes the second block (`print("It's a cool day.")`).
+
+Conditions use **comparison operators** like `>`, `<`, `==`, etc. Control flow is essential for writing dynamic, decision-based programs.
+""")
+
+# Try it yourself box
+st.write("### Try it Yourself:")
+user_code2 = st.text_area("Example 2: Paste or modify the code and hit 'Run' to see the output.", value=code2, height=150, key="2")
+
+if st.button("Run Example 2 Code"):
+    try:
+        exec_locals = {}
+        exec(user_code2, {}, exec_locals)
+        st.success("Code ran successfully!")
+    except Exception as e:
+        st.error(f"Error: {str(e)}")
+
+# 3. Loops: For and While
 st.subheader("3. Loops: For and While")
 code3 = '''numbers = [1, 2, 3, 4, 5]
 for number in numbers:
@@ -45,9 +84,28 @@ while count > 0:
     count -= 1
 '''
 st.code(code3, language="python")
-create_explanation("Loops", "Loops are used to repeat tasks. A 'for' loop iterates over a list, and a 'while' loop repeats until a condition becomes false.")
 
-# Example 4: Functions
+create_explanation("Loops: For and While", """
+**Loops** allow you to repeat tasks. In this example, we demonstrate two types of loops:
+- **For loop**: The `for` loop iterates over a list of numbers (`numbers`), printing each item in the list. This loop is commonly used when you know in advance how many times you want to iterate.
+- **While loop**: The `while` loop continues as long as a specified condition is `True`. In this case, it counts down from `5` to `0`. This loop is useful when the number of iterations isn't known beforehand, but depends on a condition.
+
+Loops are fundamental for automating repetitive tasks and processing sequences of data.
+""")
+
+# Try it yourself box
+st.write("### Try it Yourself:")
+user_code3 = st.text_area("Example 3: Paste or modify the code and hit 'Run' to see the output.", value=code3, height=150, key="3")
+
+if st.button("Run Example 3 Code"):
+    try:
+        exec_locals = {}
+        exec(user_code3, {}, exec_locals)
+        st.success("Code ran successfully!")
+    except Exception as e:
+        st.error(f"Error: {str(e)}")
+
+# 4. Functions: Defining and Using Functions
 st.subheader("4. Functions: Defining and Using Functions")
 code4 = '''def add_numbers(a, b):
     return a + b
@@ -56,9 +114,29 @@ result = add_numbers(10, 20)
 print(f"The result is: {result}")
 '''
 st.code(code4, language="python")
-create_explanation("Functions", "Functions allow you to define reusable blocks of code. In this example, a function adds two numbers.")
 
-# Example 5: Lists and Dictionaries
+create_explanation("Functions: Defining and Using Functions", """
+A **function** is a block of code that performs a specific task and can be reused multiple times. Functions allow us to structure our code for better readability and efficiency. Here's what's happening:
+- We define a function `add_numbers(a, b)` which takes two arguments (`a` and `b`) and returns their sum.
+- Then, we call this function with two numbers, `10` and `20`, and store the result in the variable `result`.
+- Finally, we print the result.
+
+Functions help make your code more modular and reusable by avoiding repetition.
+""")
+
+# Try it yourself box
+st.write("### Try it Yourself:")
+user_code4 = st.text_area("Example 4: Paste or modify the code and hit 'Run' to see the output.", value=code4, height=150, key="4")
+
+if st.button("Run Example 4 Code"):
+    try:
+        exec_locals = {}
+        exec(user_code4, {}, exec_locals)
+        st.success("Code ran successfully!")
+    except Exception as e:
+        st.error(f"Error: {str(e)}")
+
+# 5. Lists and Dictionaries
 st.subheader("5. Basic Data Structures: Lists and Dictionaries")
 code5 = '''fruits = ["apple", "banana", "cherry"]
 print(f"First fruit: {fruits[0]}")
@@ -67,22 +145,26 @@ student = {"name": "John", "age": 22, "major": "Computer Science"}
 print(f"Student name: {student['name']}")
 '''
 st.code(code5, language="python")
-create_explanation("Lists and Dictionaries", "Lists hold sequences of items, and dictionaries store data as key-value pairs.")
 
-# Interactive code execution section
-st.subheader("Try It Yourself: Python Code Simulation")
-user_code = st.text_area("Paste your Python code below and hit 'Run' to see the output.", height=150)
+create_explanation("Basic Data Structures: Lists and Dictionaries", """
+In Python, **data structures** are used to store and organize data. Two common structures are:
+- **Lists**: Ordered collections of items (e.g., numbers, strings). You can access items by their index. In the example, `fruits[0]` retrieves the first item, `"apple"`.
+- **Dictionaries**: Unordered collections of key-value pairs. In the example, `student['name']` retrieves the value associated with the key `'name'`, which is `"John"`.
+
+These structures are essential for storing and managing data in your programs, and you’ll frequently use them in everyday coding.
+""")
+
+# Try it yourself box
+st.write("### Try it Yourself:")
+user_code5 = st.text_area("Example 5: Paste or modify the code and hit 'Run' to see the output.", value=code5, height=150, key="5")
 
-if st.button("Run Code"):
+if st.button("Run Example 5 Code"):
     try:
-        # Capture and display the output of the user's code
         exec_locals = {}
-        exec(user_code, {}, exec_locals)
+        exec(user_code5, {}, exec_locals)
         st.success("Code ran successfully!")
-        output = exec_locals
-        st.write(output)
     except Exception as e:
         st.error(f"Error: {str(e)}")
 
-# Educational footer
-st.write("This app is an educational tool to help you learn basic Python concepts. Keep exploring and practicing!")
+# Footer
+st.write("This app is an educational tool to help you learn basic Python concepts. Keep exploring and practicing to master the language!")