The Secant Line
Drag point Q closer to point P. Watch what happens to the line!
Tangent Line!
Naming the Parts
Drag the mathematical expressions to match their visual meaning on the graph.
{{ target.label }}
{{ target.desc }}
startDrag(e, target.item, target.id)"
class="draggable absolute inset-0 bg-white border-2 rounded-lg shadow-sm flex items-center justify-center z-10"
:class="target.isCorrect ? 'border-emerald-500 text-emerald-700' : 'border-slate-300'">
Drop here
startDrag(e, item, 'pool')"
class="draggable bg-white border-2 border-indigo-200 text-indigo-800 px-4 py-2 rounded-lg shadow-sm hover:shadow-md transition-shadow flex items-center justify-center text-lg">
Build the Definition
Drag the pieces to assemble the formal definition of the derivative.
startDrag(e, s2_slots.lim, 'slot-lim')"
class="draggable absolute inset-0 bg-white border-2 border-indigo-200 rounded-xl shadow-sm flex items-center justify-center z-10 text-xl">
startDrag(e, s2_slots.num, 'slot-num')"
class="draggable absolute inset-0 bg-white border-2 border-indigo-200 rounded-xl shadow-sm flex items-center justify-center z-10 text-xl">
startDrag(e, s2_slots.den, 'slot-den')"
class="draggable absolute inset-0 bg-white border-2 border-indigo-200 rounded-xl shadow-sm flex items-center justify-center z-10 text-xl">
startDrag(e, item, 'pool')"
class="draggable bg-white border-2 border-indigo-200 text-indigo-800 px-6 py-3 rounded-xl shadow-sm hover:shadow-md transition-shadow flex items-center justify-center text-xl">
Finding the Tangent Line
Slide towards 0 to find the exact slope, then pick the equation.
Function:
Point :
Point :
| {{ row.x_h }} | {{ row.fx_h }} | {{ row.slope }} |
Brilliant!
You've mastered the definition of the derivative and found the tangent line.