Create app.py

app.py

@@ -0,0 +1,80 @@
+import gradio as gr
+import matplotlib.pyplot as plt
+import numpy as np
+
+# ---------- EXPLANATION TEXT ----------
+motor_text = """
+## How an Electric Motor Runs
+
+An electric motor converts electrical energy into mechanical energy using **electromagnetism**.
+
+**Key parts:**
+- **Rotor** – The rotating part.
+- **Stator** – The stationary part with magnets or coils.
+- **Commutator & Brushes** – Switch current direction to keep the rotor spinning.
+
+**Basic principle:**
+When current flows through a coil in a magnetic field, a force (Lorentz force) acts on it, making it rotate. Changing current direction at the right time keeps it spinning.
+"""
+
+# ---------- DIAGRAM FUNCTION ----------
+def draw_motor(angle):
+    fig, ax = plt.subplots(figsize=(4,4))
+    ax.set_xlim(-1.5, 1.5)
+    ax.set_ylim(-1.5, 1.5)
+    ax.set_aspect('equal')
+    ax.axis('off')
+
+    # Magnetic field lines
+    for y in np.linspace(-1, 1, 5):
+        ax.arrow(-1.4, y, 2.8, 0, head_width=0.05, color='blue')
+
+    # Rotor coil
+    coil_x = [0.5*np.cos(angle), -0.5*np.cos(angle)]
+    coil_y = [0.5*np.sin(angle), -0.5*np.sin(angle)]
+    ax.plot(coil_x, coil_y, color='red', linewidth=3)
+
+    # Rotor circle
+    circle = plt.Circle((0,0), 0.6, fill=False, color='black', linewidth=1.5)
+    ax.add_artist(circle)
+
+    # Force arrows
+    ax.arrow(coil_x[0], coil_y[0], 0.2*np.sin(angle), -0.2*np.cos(angle), color='green', width=0.01)
+    ax.arrow(coil_x[1], coil_y[1], -0.2*np.sin(angle), 0.2*np.cos(angle), color='green', width=0.01)
+
+    plt.close(fig)
+    return fig
+
+# ---------- QUIZ ----------
+quiz_questions = [
+    ("What part of a motor rotates?", ["Stator", "Rotor", "Magnet", "Brushes"], "Rotor"),
+    ("What converts electrical to mechanical energy?", ["Generator", "Motor", "Battery", "Switch"], "Motor"),
+    ("What keeps the motor spinning in the same direction?", ["Magnets", "Switch", "Commutator", "Resistor"], "Commutator")
+]
+
+def quiz(q_idx, answer):
+    question, options, correct = quiz_questions[q_idx]
+    if answer == correct:
+        return "✅ Correct!"
+    else:
+        return f"❌ Incorrect. Correct answer: {correct}"
+
+# ---------- GRADIO UI ----------
+with gr.Blocks() as demo:
+    gr.Markdown("# Spin It! — How an Electric Motor Runs")
+
+    with gr.Tab("Learn"):
+        gr.Markdown(motor_text)
+        angle_slider = gr.Slider(0, 2*np.pi, value=0, step=0.1, label="Rotor Angle")
+        image_output = gr.Plot()
+        angle_slider.change(lambda a: draw_motor(a), inputs=angle_slider, outputs=image_output)
+        draw_motor(0)
+
+    with gr.Tab("Test Yourself"):
+        q_idx = gr.Number(value=0, label="Question Number (0-2)", precision=0)
+        answer_choice = gr.Radio(["Stator", "Rotor", "Magnet", "Brushes"], label="Select your answer")
+        quiz_btn = gr.Button("Submit Answer")
+        quiz_output = gr.Textbox(label="Result")
+        quiz_btn.click(quiz, inputs=[q_idx, answer_choice], outputs=quiz_output)
+
+demo.launch()