Kevin

Perfect—here’s an upgraded, drop-in prompt that adds a demand elasticity control (with two modeling options) and shows how elasticity alters the before/after equilibrium and total revenue.

 

 

 

Prompt (paste into your code generator):

 

Build an interactive web app (HTML/CSS/JS with p5.js, D3.js, or Plotly.js) that visualizes a demand–supply model and highlights how shocks shift curves and change equilibrium price (P), quantity (Q), and total revenue (TR = P×Q). Add a dedicated control to change the elasticity of demand and reflect its consequences visually and numerically.

 

Core features

 

Axes & Curves
X-axis = Quantity; Y-axis = Price.
Initial Demand (D₁) downward sloping and Supply (S₁) upward sloping; clearly labeled.
Keep a “ghosted” copy of original curves when they shift (for comparison).
 
Equilibrium & Revenue (Before/After)
Compute initial E₁(P₁, Q₁) with dashed guides; badge showing P₁, Q₁, TR₁ = P₁×Q₁.
After any change, compute E₂(P₂, Q₂); badge P₂, Q₂, TR₂.
Shade TR rectangles: R₁ (to Q₁×P₁) and R₂ (to Q₂×P₂), semi-transparent to compare areas.
Draw arrowed deltas (ΔP, ΔQ). Provide Comparison Panel showing P₁/P₂, Q₁/Q₂, TR₁/TR₂, and ΔP/ΔQ/ΔTR (absolute & %).
 
Interactive Shocks (Determinants)
Sliders/dropdowns for demand shifters (income, tastes, related goods, number of buyers) and supply shifters (technology, input costs, number of sellers).
Smoothly shift the relevant curve and recompute equilibrium and revenue.
 
Demand Elasticity Control (the new part)
Elasticity Mode toggle with two options:
Linear (point-elasticity at equilibrium): Use linear demand in direct form
Q = A − B·P. At the current equilibrium (P*, Q*), let the user set a target elasticity ε_d (negative by convention; UI slider shows |ε_d|).
Enforce that D passes through (P*, Q*) and has the chosen elasticity there by setting:
B = (|ε_d| · Q*/P*) and A = Q* + B·P*.
(Point elasticity at E is then ε_d = −B·(P*/Q*).)
Re-render D with these new A,B while keeping E₁ fixed before further shocks.
Display the computed local elasticity at E₁ and E₂ as the user moves sliders.
 
Isoelastic (constant elasticity): Use Q = k · P^{−e}, where e = |ε_d| (constant along the curve).
Calibrate k = Q* · (P*)^{e} so the curve passes through the current equilibrium.
Recompute E₂ when other shifters change; show that |ε| is constant along D.
 
 
UI: a slider for |ε_d| (range ~0.2 to 3.0), numeric readout, and a dropdown for Linear vs Isoelastic.
Dynamic hints:
If |ε_d| > 1 (elastic), note “price ↑ → TR ↓” and vice versa; if |ε_d| < 1 (inelastic), the opposite.
Show MR toggle (optional): for isoelastic, MR slope differs; for linear, draw MR with twice the slope. Label MR only when toggled on.
 
 
Live Explanations
Text box updates with plain-English logic, e.g.,
“Income ↑ shifts demand right. With |ε_d| = 1.6 (elastic) at E₁, equilibrium price rises, quantity rises, and TR increases with the outward shift.”
 
Controls & UI niceties
Buttons: Reset, Show/Hide TR rectangles, Show/Hide ΔP/ΔQ, Toggle MR, Side-by-side view (E₁ left vs E₂ right).
Tooltips on elasticity slider explaining the setting (“Higher |ε| = flatter demand; revenue falls when price rises” for elastic region).
Mobile-friendly labels and keyboard-accessible controls.
 
Math & Computation
Always compute equilibrium analytically from current D and S forms. For supply, keep linear Q = α + β·P (or P = c + d·Q) and let shifters move intercepts/β sensibly.
Display the current point elasticity of demand at E₂:
Linear mode: ε_d(E) = −B·(P/Q)
Isoelastic mode: ε_d(E) = −e (constant)
 
 
 

 

Goal

Students can change demand elasticity and immediately see how the same shock yields different equilibrium and revenue outcomes—reinforcing the link between elasticity, price changes, and TR.

 

 

 

If you want, I can also give you a ready-to-run Plotly.js version that implements both elasticity modes with the formulas above and the TR rectangles pre-styled.

https://vle.sandbox.sls.moe.edu.sg/class-group/module/view/af779313-c60f-4a7a-bdff-e89c6fcad21b/section/34049/activity/34099