Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| # Step-by-step prompts | |
| PROMPTS = [ | |
| "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.", | |
| "Have you created a **bar model** to represent Jessica’s travel?\n" | |
| "- If not, try drawing a bar to represent **2 hours = 90 miles**.\n" | |
| "- Can you divide it into equal segments to show **1 hour = 45 miles**?\n" | |
| "- How would you extend the bar to **3 hours**?\n" | |
| "- Can you split **1 hour** into halves to show **½ hour = 22.5 miles**?\n\n" | |
| "✅ Does your bar model correctly show **½, 1, 2, and 3 hours**?", | |
| "Have you created a **double number line** for time and distance?\n" | |
| "- If not, try drawing two parallel lines:\n" | |
| " - One for **time (hours)**\n" | |
| " - One for **distance (miles)**\n" | |
| "- Can you correctly place these 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" | |
| "- Are the distances evenly spaced?\n\n" | |
| "✅ Does your number line show **a proportional relationship**?", | |
| "Have you created a **ratio table**?\n" | |
| "- If not, try filling in this table:\n\n" | |
| "| Time (hours) | Distance (miles) |\n" | |
| "|-------------|-----------------|\n" | |
| "| 0.5 | 22.5 |\n" | |
| "| 1 | 45 |\n" | |
| "| 2 | 90 |\n" | |
| "| 3 | 135 |\n\n" | |
| "- Can you find a pattern in the table?\n" | |
| "- What would be the distance for **4 hours**?\n\n" | |
| "✅ Does your table clearly show a **proportional pattern**?", | |
| "Have you created a **graph** to represent this relationship?\n" | |
| "- If not, try plotting these points:\n" | |
| " - (0, 0)\n" | |
| " - (0.5, 22.5)\n" | |
| " - (1, 45)\n" | |
| " - (2, 90)\n" | |
| " - (3, 135)\n" | |
| "- Can you draw a straight line through them?\n" | |
| "- What does the slope of the line tell you about Jessica’s driving rate?\n\n" | |
| "✅ Does your graph correctly show a **linear relationship**?", | |
| "Final Reflection:\n" | |
| "- Which representation helped you understand the relationship best? Why?\n" | |
| "- How do these representations show the **same proportional relationship** in different ways?\n" | |
| "- Can you apply this method to another real-world proportional relationship?" | |
| ] | |
| # 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) | |
| 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(("You:", user_response if user_response else "")) | |
| next_message, new_state = guide_user(state) | |
| history.append(("AI:", next_message)) | |
| return history, new_state | |
| next_btn.click(update_chat, [user_input, chatbot, state], [chatbot, state]) | |
| app.launch() | |