Implement Dynamic Graph Question

Use p5.js to build a coordinate plane with configurable axes and snap-to-grid functionality. Students click two points to draw lines representing linear relationships, with automatic grid alignment for precision. The plane supports custom axis ranges and labels to match your problem context.

Yes. Students draw lines through specified points or from the origin to visualize proportional relationships and match lines to equations. The skill calculates slope and intercept automatically, making it ideal for assessing understanding of linear functions and their graphical representations.

Configure axis ranges, custom labels for both axes, and grid snapping intervals including fractional subdivisions. This flexibility lets you tailor the coordinate plane to specific problems—like setting x-axis as time and y-axis as distance for real-world scenario questions.

The skill provides API methods to lock and unlock student interaction, and reset the coordinate plane to clear drawn lines. This enables you to control when students can draw, review their work, or start fresh on new problems.

Yes. The skill integrates D3 for rendering cards and messaging components alongside the p5.js coordinate plane, allowing you to display problem context, instructions, or feedback in the same interface.

Yes. Students can draw and analyze multiple lines simultaneously on the coordinate plane, making it possible to compare different linear scenarios, slopes, and intercepts to deepen understanding of how equation parameters affect graph shape.