From “Fixed Base” to Flexible Thinking: Designing a Rotatable Triangle GeogeBra Interactive with AI

 

From “Fixed Base” to Flexible Thinking: Designing a Rotatable Triangle Interactive with AI

It started with a simple but powerful question from Lily:

“Can help to rotate the line AB to a different angle?”

She shared a GeoGebra applet and a draft SLS lesson. At first glance, the tool worked — but pedagogically, something deeper was needed.

---

🚩 The Core Misconception

Many students carry this hidden assumption:

The base of a triangle must be the bottom horizontal side.

This is not just a visual habit — it’s a conceptual barrier.

Lily clarified the real goal:

• Students should work with triangles at different orientations
• The base should not be fixed
• Students should move vertices themselves

• They must understand that:

  Any side can be the base — the height depends on that choice

This shifts the task from seeing to thinking.

---

🎯 Pedagogical Intent (Why This Matters)

This is a classic conceptual change problem:

Misconception	Target Understanding
Base = bottom horizontal side	Base = any chosen side
Height = vertical line downwards	Height = perpendicular to base
Triangle must be upright	Triangle can be rotated

To achieve this, static diagrams are insufficient.

We need:

• Dynamic manipulation
• Multiple orientations
• Student-generated examples

---

🔄 Moving Beyond GeoGebra Defaults

The original GeoGebra applet is clean and functional — but:

• It often anchors perception to a fixed orientation
• It does not explicitly force students to confront rotated cases
• It risks reinforcing the “bottom = base” mental model

So instead of just modifying it…

👉 We redesign the experience.

---

🚀 Enter AI + Student Learning Space ACP

Using:

• Authoring Co-Pilot (ACP)
• A structured prompt
• HTML5 interactive generation

We can build a pedagogically intentional simulation.

Even better — this integrates directly into SLS modules.

---

💡 Key Design Shift

Instead of:

“Here is a triangle. Identify the base.”

We design:

“Here is a triangle you control. Now define the base and see what happens.”

This subtle shift:

• Activates agency
• Encourages exploration
• Surfaces misconceptions

---

🧠 The Prompt That Powers It

Here is the full prompt used to generate the interactive:

Create an interactive HTML5 simulation in a single file (HTML, CSS, and JavaScript together) for students to practise identifying the base and corresponding perpendicular height of triangles in many different orientations.

Pedagogical intent:
- The purpose of the interactive is to help students understand that a triangle does not need to sit on a horizontal side for that side to be considered the base.
- Students should practise with triangles rotated at different angles, not just fixed upright triangles.
- The interactive should challenge the misconception that the base must always be the bottom horizontal side.
- The simulation should reinforce that any side of a triangle can be chosen as the base, and the corresponding height is the perpendicular distance from the opposite vertex to the line containing that base.

Core requirements:

1. Triangle setup
- Show a triangle with 3 draggable vertices labelled A, B, and C.
- The triangle should be freely movable by dragging its vertices.
- The triangle should often appear rotated or slanted rather than always upright.
- Include a button to generate a new random triangle orientation so students can practise with many different rotated examples.

2. Base selection
- Allow the user to choose any side of the triangle as the base: AB, BC, or CA.
- The selected side should be clearly highlighted.
- Make it obvious that the chosen base can be slanted, vertical, or in any orientation.

3. Corresponding height
- Once a base is selected, draw the perpendicular height from the opposite vertex to the selected base (or to the extension of the base if needed).
- Show the foot of the perpendicular clearly.
- Include a right-angle marker where the height meets the base or its extension.
- The height should update dynamically whenever the triangle is changed.

4. Practice focus
- Design the simulation for learning and practice, not just display.
- Include prompts such as:
  - “Select a base.”
  - “Identify the corresponding perpendicular height.”
  - “Does the height fall inside or outside the triangle?”
- Include examples where the perpendicular height lies outside the triangle, so students learn this case too.

5. Measurements and feedback
- Display:
  - selected base length
  - corresponding perpendicular height
  - area of triangle using 1/2 × base × height
- Update all values live.
- Optionally provide feedback text such as:
  - “This side is the base.”
  - “The dashed line shows the perpendicular height.”
  - “The base does not have to be horizontal.”

6. Visual design
- Use a clean classroom-friendly design.
- Show triangle edges clearly.
- Highlight the selected base in a contrasting color.
- Show the height as a dashed line.
- Label points and important features clearly.
- Optional coordinate grid or plain background.

7. Technical constraints
- Use only vanilla HTML, CSS, and JavaScript.
- No external libraries.
- Keep everything in a single file for easy classroom deployment and preview.
- Code should be well-structured and commented.

8. Optional learning enhancements
- A “Random Triangle” button to generate triangles at different rotations and shapes.
- A “Show/Hide Height” toggle.
- A “Practice Mode” where students first guess the height before revealing it.
- A short instruction panel explaining:
  - any side can be a base
  - the corresponding height must be perpendicular to that base
  - the base does not need to be at the bottom
  - rotated triangles should still be interpreted the same way

Goal:
The final simulation should help students practise identifying bases and corresponding heights in triangles that are rotated at different angles, so they do not wrongly assume that the base is always a fixed horizontal side at the bottom.

---

🔍 What Changed in the Learning Experience?

Before

• Students observe a triangle
• Teacher explains base & height

After

• Students drag vertices
• Students choose the base
• Students see height change dynamically

This creates:

• Cognitive conflict
• Immediate feedback
• Deeper understanding

---

📊 Why This Works (SLS + ACP + xAPI mindset)

This design aligns strongly with:

• Foster Conceptual Change (KAT)
• Student-content interaction
• Potential for xAPI tracking:
  • Which base did students choose?
  • How often did they change it?
  • Did they explore non-horizontal cases?

---

🧩 Teacher Moves (How to Use This)

You can embed this in an SLS lesson and ask:

1. “Choose a base that is NOT horizontal.”
2. “Where is the height now?”
3. “Why is the height outside the triangle?”
4. “Rotate your triangle — does the formula still work?”

---

🚀 Final Reflection

This wasn’t just about rotating a line.

It was about:

Rotating student thinking.

And with AI + SLS ACP, we are no longer limited by static diagrams.

We can now design:

• Experiences
• Misconception traps
• Dynamic conceptual change