Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # Step-by-step prompts | |
| PROMPTS = [ | |
| # Task Introduction | |
| "## Task: Representing Jessica’s Driving Distance 🚗\n" | |
| "Jessica is driving at a constant speed. She travels **90 miles in 2 hours**.\n\n" | |
| "### Your Goal:\n" | |
| "Represent the relationship between **time and distance** using different mathematical models:\n" | |
| "✅ Bar Model\n" | |
| "✅ Double Number Line\n" | |
| "✅ Ratio Table\n" | |
| "✅ Graph\n\n" | |
| "Let’s go through each representation step by step!", | |
| # Step 1: Identifying Current Representation | |
| "Which representations have you already used to show the relationship between time and distance?\n" | |
| "- Bar Model\n" | |
| "- Double Number Line\n" | |
| "- Ratio Table\n" | |
| "- Graph\n\n" | |
| "If you haven’t used all of them, let’s go through each one step by step.", | |
| # Step 2: Bar Model | |
| "### Step 1: Bar Model Representation 📊\n" | |
| "Have you created a **bar model** to represent Jessica’s travel?\n\n" | |
| "**If not, follow these steps:**\n" | |
| "1️⃣ Draw a **long bar** to represent **2 hours of driving**, labeling it **90 miles**.\n" | |
| "2️⃣ Divide the bar into **two equal parts** to show **1 hour = 45 miles**.\n" | |
| "3️⃣ Extend the bar to **3 hours** by adding another **45-mile segment**.\n" | |
| "4️⃣ Divide **one 1-hour segment in half** to show **½ hour = 22.5 miles**.\n\n" | |
| "✅ Does your bar model correctly show **½, 1, 2, and 3 hours**?", | |
| # Step 3: Double Number Line | |
| "### Step 2: Double Number Line Representation 📏\n" | |
| "Have you created a **double number line** for time and distance?\n\n" | |
| "**If not, follow these steps:**\n" | |
| "1️⃣ Draw **two parallel number lines**:\n" | |
| " - The **top line** represents **time (hours)**.\n" | |
| " - The **bottom line** represents **distance (miles)**.\n" | |
| "2️⃣ Mark these key points:\n" | |
| " - **0 hours → 0 miles**\n" | |
| " - **½ hour → 22.5 miles**\n" | |
| " - **1 hour → 45 miles**\n" | |
| " - **2 hours → 90 miles**\n" | |
| " - **3 hours → 135 miles**\n" | |
| "3️⃣ Ensure the distances are evenly spaced.\n\n" | |
| "✅ Does your number line show a **proportional relationship**?", | |
| # Step 4: Ratio Table | |
| "### Step 3: Ratio Table Representation 📋\n" | |
| "Have you created a **ratio table**?\n\n" | |
| "**If not, follow these steps:**\n" | |
| "1️⃣ Fill in the table below:\n\n" | |
| "| Time (hours) | Distance (miles) |\n" | |
| "|-------------|-----------------|\n" | |
| "| 0.5 | 22.5 |\n" | |
| "| 1 | 45 |\n" | |
| "| 2 | 90 |\n" | |
| "| 3 | 135 |\n\n" | |
| "2️⃣ Look for patterns.\n" | |
| "3️⃣ What would be the distance for **4 hours**?\n\n" | |
| "✅ Does your table clearly show a **proportional pattern**?", | |
| # Step 5: Graph | |
| "### Step 4: Graph Representation 📈\n" | |
| "Have you created a **graph** to represent this relationship?\n\n" | |
| "**If not, follow these steps:**\n" | |
| "1️⃣ Draw a **coordinate plane**:\n" | |
| " - **x-axis → time (hours)**\n" | |
| " - **y-axis → distance (miles)**\n" | |
| "2️⃣ Plot these points:\n" | |
| " - (0, 0)\n" | |
| " - (0.5, 22.5)\n" | |
| " - (1, 45)\n" | |
| " - (2, 90)\n" | |
| " - (3, 135)\n" | |
| "3️⃣ Draw a straight line through these points.\n" | |
| "4️⃣ What does the **slope of the line** tell you about Jessica’s driving rate?\n\n" | |
| "✅ Does your graph correctly show a **linear relationship**?", | |
| # Step 6: Final Reflection & Posing Questions | |
| "### Final Reflection 💭\n" | |
| "Great job! Now, take a moment to reflect:\n" | |
| "1️⃣ Which representation helped you understand the relationship best? Why?\n" | |
| "2️⃣ How do these representations show the **same proportional relationship** in different ways?\n" | |
| "3️⃣ Can you apply this method to another real-world proportional relationship?\n\n" | |
| "### New Challenge 🌟\n" | |
| "Imagine Jessica increases her speed by **10 miles per hour**. How would this affect the bar model, number line, ratio table, and graph?\n\n" | |
| "Try adjusting your models to reflect this change!", | |
| # Summary of Objectives & Common Core Standards | |
| "### Summary of Objectives 🎯\n" | |
| "- You explored **four ways** to represent proportional relationships: Bar Model, Double Number Line, Ratio Table, and Graph.\n" | |
| "- You understood how **time and distance** relate at a constant rate.\n" | |
| "- You analyzed how different models show the **same mathematical pattern**.\n\n" | |
| "### Common Core Math Standards 🏆\n" | |
| "- **6.RP.A.1** - Understand the concept of a ratio.\n" | |
| "- **6.RP.A.3a** - Use ratio reasoning to solve real-world problems.\n" | |
| "- **7.RP.A.2** - Recognize proportional relationships.\n\n" | |
| "✅ **Congratulations! You’ve completed this module.** 🚀" | |
| ] | |
| # State tracking function | |
| def guide_user(state): | |
| """Returns the next step based on user progress""" | |
| state = int(state) + 1 | |
| if state >= len(PROMPTS): | |
| return "✅ You have completed all steps! Great job!", str(state) | |
| return PROMPTS[state], str(state) | |
| # Gradio interface | |
| with gr.Blocks() as app: | |
| gr.Markdown("## Step-by-Step Guide: Representing Jessica's Driving Distance 🚗") | |
| state = gr.State(value="0") # Tracks the user's progress | |
| chatbot = gr.Chatbot(label="AI Guide", height=300, type="messages") # Fixed deprecation warning | |
| user_input = gr.Textbox(label="Your Response (optional)", placeholder="Type here or click 'Next' to continue...") | |
| next_btn = gr.Button("Next Step ➡️") | |
| def update_chat(user_response, history, state): | |
| """Updates chat history and progresses to the next step""" | |
| history.append({"role": "user", "content": user_response if user_response else ""}) | |
| next_message, new_state = guide_user(state) | |
| history.append({"role": "assistant", "content": next_message}) | |
| return history, new_state | |
| next_btn.click(update_chat, [user_input, chatbot, state], [chatbot, state]) | |
| app.launch() |