Source-linked AI summary
Leveraging Generative AI to Design Accessible Interactive Visualizations for Undergraduate Mathematics: A Six-Phase Workflow
Mahesh Sunkula, Kuan-Hua Chen
TL;DR
Undergraduate mathematics instructors need interactive visualizations but often lack the programming expertise to build them. This design-based research study develops and evaluates a six-phase generative-AI workflow for creating accessible tools from structured prompts. Across four deployed tools, the workflow produced structurally complete, mathematically correct, and accessible results when each phase received human verification, and it operated in both backward and forward directions across AI platforms.
Problem
Interactive visualizations support conceptual understanding, but creating them has required programming expertise and time that many mathematics instructors lack.
Method
The study uses design-based research to develop, deploy, and evaluate a six-phase workflow that structures prompts, scaffolds code generation, and applies verification at phase boundaries.
Results
Across four deployed tools, the workflow reliably yielded mathematically correct and accessible tools after verification, operated backward and forward, and remained independent of the AI platform.
Takeaways & Limitations
The workflow lowers the technical barrier to producing classroom-ready visualizations while preserving mathematics-education decisions and verification as human responsibilities.
Takeaways & Limitations
First-pass outputs are structurally complete but still require phase-specific mathematical, pedagogical, accessibility, and manual screen-reader verification.
Abstract
from arXiv · showhide
Interactive visualizations support conceptual understanding in undergraduate mathematics, but building them has required programming expertise most instructors lack. Using a design-based research approach, we develop, deploy, and evaluate a six-phase workflow (Foundation, Customization, Mathematical Depth, Application, Accessibility, Pedagogical Control) that uses generative AI to build WCAG~2.2 Level~AA compliant visualizations without programming. The six phases structure every prompt, scaffold the AI's code generation, and define where human verification is applied. We ask whether the structure reliably yields correct and accessible tools, whether it runs both backward (reverse-engineering prompts from a finished tool) and forward (generating a tool from a plain-language idea), and what verification each phase requires. Across four deployed tools spanning calculus, multivariable calculus, and differential equations, we evaluate mathematical correctness against closed forms, accessibility through automated and manual screen-reader testing, and the errors that recurred. The structure produces structurally complete first-pass tools, but human verification remains mandatory at every phase: each output must be checked for mathematical correctness, accessibility, and pedagogical fit before the next phase begins. The workflow is platform-independent and serves both instructors and students.
1. Introduction
Interactive visualizations can connect mathematical representations to conceptual understanding, but instructors often lack the programming expertise and time to build them. This paper studies a structured, six-phase generative-AI workflow designed to produce accessible, pedagogically purposeful tools while retaining human verification.
- Interactive visualizations let students manipulate parameters and develop geometric intuition supporting analytical work.
- Generative AI addresses the development barrier by producing working code from natural-language descriptions, but a single large prompt produces mediocre results.
- The six-phase workflow uses focused deliverables and validation checkpoints to produce mathematically correct, pedagogically purposeful, and accessible tools.
- Poorly designed visualizations can impose extraneous cognitive load, so pedagogically principled design remains necessary when AI handles implementation.
- The study treats the workflow as a design-based research intervention refined through iterative design, deployment, and analysis in authentic instructional settings.
- The research evaluates mathematical correctness, WCAG 2.2 Level AA accessibility, bidirectional operation, platform independence, and recurring verification needs.
2. Theoretical Background
The theoretical background frames visualization as a means of coordinating mathematical representations and supporting active construction of understanding. It also emphasizes that accessibility and human oversight remain essential because AI-generated educational materials can contain subtle errors.
- Dynamic visualizations enrich students’ concept images by making abstract relationships visible through varied examples.
- Interactive tools support coordination among symbolic, graphical, numerical, and verbal mathematical representations.
- Constructivist theory supports active engagement, and describing relationships precisely enough for AI implementation can surface misconceptions.
- Universal Design for Learning advocates accessible materials from the outset, while mathematics accessibility requires conveying relationships through non-visual channels.
- AI can implement accessibility requirements specified in natural language, but human testing with assistive technology users remains essential.
- Generated code may contain subtle bugs or fail on edge cases, motivating specificity, iterative refinement, domain knowledge, and human oversight.
3. The Six-Phase Workflow
The workflow breaks visualization development into six targeted phases, each with a defined deliverable and validation step. The same phase structure supports interactive prompting and AI-generated prompt sets from plain-language pedagogical ideas.
- Six targeted phases replace a single complex prompt, consistently producing tools that are mathematically correct, pedagogically purposeful, and accessible.
- Foundation: Phase 1 establishes the mathematical concept and core interaction while prioritizing correct implementation before additional features.
- Customization: Phase 2 adds parameter controls, presets, custom functions, and input validation to transform a demonstration into an exploration tool.
- Mathematical Depth: Phase 3 connects the core idea to related concepts such as derivatives, geometric objects, orthogonality, and optimization directions.
- Applications: Phase 4 links abstract mathematics to applications and computational methods, including optimization, numerical integration, and physical simulation.
- Accessibility and Pedagogical Control: Phase 5 implements WCAG 2.2 Level AA features, while Phase 6 adds progressive disclosure, reset functionality, and instructor-controlled scaffolding.Accessibility includes keyboard navigation, touch-target sizing, live regions, skip links, and reduced-motion support.
- Both Claude and Gemini support the six-phase workflow, with different strengths across React, accessibility, Three.js, Plotly.js, and Canvas implementations.
4. Interactive Visualizations
The paper presents interactive tools for multivariable calculus and differential equations, addressing students’ difficulty connecting symbolic formulas to geometric meaning and dynamic behavior. The examples use the six-phase methodology iteratively and distinguish tools built through interactive development from those generated from ideas.
- The four examples comprise two Stage 1 tools built interactively and reverse-engineered into prompts, plus two distinct Stage 2 tools generated from ideas.
- Directional Derivatives and Gradient Vectors: The first Stage 1 example targets geometric understanding of multivariable calculus through gradients, tangent planes, directional derivatives, and live optimization.
- Directional Derivatives and Gradient Vectors: The Directional Derivatives and Gradient Vectors explorer lets users inspect coordinate slopes, linear approximation, level-curve geometry, directional derivatives, and gradient ascent.
- Dynamical Systems Phase Portrait Laboratory: The second Stage 1 example addresses differential-equations students who can produce solution formulas but struggle to describe their graphical behavior.
- Dynamical Systems Phase Portrait Laboratory: The phase-portrait tool connects velocity components, initial conditions, Jacobian eigenvalues, nullclines, equilibrium classification, and standard dynamical systems.
5. Reverse-Engineered Six-Phase Prompts
The reverse-engineered prompts translate completed visualizations into six phase-aligned starting points, with each phase specifying implementation and validation targets. Across multivariable-calculus and dynamical-systems examples, the prompts produced functional features whose mathematics, accessibility, and pedagogical controls were explicitly checked.
- Reverse-engineered workflow: Completed and verified visualizations were distilled into one adaptable prompt per phase, rather than copied from the original iterative conversations.These reconstructed prompts are intended as starting points colleagues can adapt.
- 5.1. Example 1: Directional Derivatives and Gradient Vectors.: The directional-derivatives tool combines a 3D surface, movable point, cross-section traces, partial derivatives, tangent-plane and directional-derivative features.The implementation used Plotly.js and supported preset or user-defined functions with validation.
- 5.1. Example 1: Directional Derivatives and Gradient Vectors.: Its mathematical checks covered hand calculations, first-order contact, directional-derivative maximization, and orthogonality between the gradient and level-curve tangent.The gradient-direction identity and numerical orthogonality were explicitly validated.
- 5.1. Example 1: Directional Derivatives and Gradient Vectors.: Gradient ascent added animated trajectories with stopping conditions and was tested on four preset functions, including expected divergence, convergence, and saddle behavior.The algorithm used step size k = 0.05 and stopped below a gradient threshold or after 100 iterations.
- 5.1. Example 1: Directional Derivatives and Gradient Vectors.: The directional-derivatives tool implemented WCAG 2.2 Level AA features including skip links, keyboard navigation, visible focus, live announcements, reduced-motion support, and contrast requirements.NVDA, keyboard-only navigation, and axe DevTools testing found no violations.
- 5.1. Example 1: Directional Derivatives and Gradient Vectors.: Pedagogical controls let instructors toggle seven visualization layers independently and reset the tool to defined initial conditions.The layer manager and reset behavior were tested for independent operation, reliable restoration, and keyboard navigation.
- 5.2. Example 2: Dynamical Systems Phase Portrait Laboratory.: The dynamical-systems laboratory combines phase portraits, Euler and RK4 trajectories, time-series and export panels, presets, nullclines, eigenvectors, and equilibrium classification.Its preset overlays reproduced characteristic portraits, while eigenvalue classifications matched the saddle, spiral, and center cases tested.
- 5.2. Example 2: Dynamical Systems Phase Portrait Laboratory.: Validation checked trajectories against known harmonic-oscillator and saddle behavior, eigenvalues against preset systems, exports, overlays, responsive layout, and manual accessibility use.The harmonic oscillator produced closed circular orbits; CSV and PNG exports opened correctly.
6. The Two-Stage Pipeline
The workflow operates as a two-stage pipeline: iterative phase-by-phase development, followed by forward generation from a plain-language pedagogical idea. The resulting first-pass tools are structurally complete, but recurring mathematical, accessibility, and pedagogical errors make human verification necessary throughout.
- 6.1. Stage 1: Iterative development: Stage 1 develops tools through six focused conversations, validating each phase deliverable before proceeding so errors are caught before compounding.The workflow is treated as a design-based research intervention refined through design, deployment, and analysis.
- 6.2. Stage 2: Idea to prompts to visualization: Reverse-engineering a finished tool into six prompts demonstrated that the workflow can run backward as well as forward.The reconstructed prompt set was treated as evidence that the methodology was robust enough to regenerate the tool.
- 6.2. Stage 2: Idea to prompts to visualization: Stage 2 converts a plain-language teaching idea into six phase-aligned prompts and then a standalone HTML visualization.The idea specifies the concept, course, and student difficulties; the generated prompts are executed by a code-generating AI.
- 6.2. Stage 2: Idea to prompts to visualization: The first-pass output is structurally complete but commonly needs two or three focused revision exchanges targeting phase-specific problems.Mathematical issues cluster in Phases 1 and 3, fit issues in Phases 2 and 6, and manual accessibility issues in Phase 5.
- 6.3. Editing the output: Human verification remains mandatory at every phase because AI-generated tools can contain mathematical, accessibility, and pedagogical errors.Mathematical checks use representative and edge-case calculations; accessibility requires manual screen-reader testing; pedagogical checks revisit learning objectives.
- Stage 2 Example 3: Heat equation: The heat-equation example used Fourier-mode, boundary-condition, probe, accessibility, and cognitive-load features to connect analytic solutions with diffusion behavior.Its six prompts were generated from one plain-language teaching idea and executed successively in Gemini.
- Stage 2 Example 3: Heat equation: The heat-equation build required coefficient verification against the flat Dirichlet closed form before trusting discrete quadrature for other initial profiles.The verified relation was bn = 4A/(nπ) for odd n and zero otherwise.
- Stage 2 Example 4: Triple Integrals as a Sweep of Cross-Sectional Areas: The triple-integral example required closed-form checks, corrections for integration limits and nonconstant integrands, constrained slice ranges, and throttled screen-reader announcements.The final tool was deployed in MA 261 at Purdue in Spring 2026.
7. Evaluation and Findings
The workflow was evaluated across four deployed tools for correctness, accessibility, bidirectional operation, platform independence, and phase-specific verification. Results show structurally complete outputs, but recurring mathematical, accessibility, and pedagogical-fit errors require human checks throughout the workflow.
- The evaluation examined workflow outputs rather than student learning, focusing on correctness, accessibility, pedagogical fidelity, and verification requirements.
- RQ1: Mathematical correctness and accessibility compliance: Every tool was checked against closed-form results and representative edge cases, with first-pass mathematical errors detected in each tool.Checks included partial derivatives, directional-derivative identities, Jacobian eigenvalues, Fourier coefficients, and cross-sectional areas.
- RQ1: Mathematical correctness and accessibility compliance: Automated WCAG 2.2 Level AA audits found no violations after Phase 5 revisions, but manual NVDA testing revealed ARIA live-region timing problems in every tool.The announcements fired at incorrect cadences during interaction, issues automated audits did not detect.
- RQ2: Bidirectional operation and platform independence: The workflow operated backward by reconstructing phase-aligned prompts from finished tools and forward by generating tools from plain-language descriptions.Forward outputs were structurally complete and included all six phases, but they were not error-free.
- RQ2: Bidirectional operation and platform independence: Two tools were built with Gemini and two with Claude and Claude Code without changing the six-phase structure, supporting platform independence.Platform-specific differences concerned implementation strengths rather than the workflow schema.
- RQ3: Required human verification and recurring errors: Recurring errors involved mathematical correctness in Phases 1, 3, and 4, accessibility timing in Phase 5, and pedagogical fit in Phases 2 and 6.Two to three focused revision exchanges per tool were sufficient, but verification remained a per-phase requirement rather than a final quality-control step.
8. Discussion
The six-phase structure improves AI-generated visualization by dividing complex prompting into validated stages while preserving human responsibility for mathematical, accessibility, and pedagogical judgment. It also opens visualization creation to students, whose precise descriptions can surface mathematical gaps.
- Effective prompting: The six-phase structure prevents mediocre results caused by giving the AI too much at once.Each phase uses a focused deliverable and validation checkpoint.
- Effective prompting: Explicit mathematics, named technologies, concrete WCAG criteria, and pedagogical rationale produce more thoughtful and complete implementations.Specific prompts distinguish requests such as displaying ∇f from generic requests to show a gradient.
- Human expertise: Generative AI accelerates implementation without replacing the mathematical and pedagogical expertise needed to judge instructional quality.Pedagogical design remains essential because poorly designed visualizations can increase extraneous cognitive load.
- Quality assurance: AI-generated visualizations still require deliberate testing of mathematical edge cases, accessibility behavior, and pedagogical appropriateness.Boundary calculations, ARIA timing, tab order, cognitive load, and sequencing remain human verification tasks.
- Student participation: Students can use the framework to create visualizations, and articulating relationships precisely enough for implementation can expose implicit mathematical gaps.Potential activities include exploratory projects, conjecture testing, and peer teaching through shared tools.
- Accessibility as standard practice: The workflow makes accessibility a default implementation target, but genuine accessibility still requires assistive-technology users and disability-resource partnerships.Technical implementation alone does not guarantee accessible experiences.
9. Applicability and Future Directions
The six-phase workflow transfers across mathematical domains and can generate complete prompt sets from plain-language ideas. Future work will test learner outcomes, instructor adoption, and a possible seventh phase for embedded reflection and assessment.
- Applicability: Phases 2–6 remain unchanged across mathematical domains, while Phase 1 names the concept and core interactive behavior.Applications include differential equations, linear algebra, complex analysis, and numerical analysis.
- Applicability: Stage 2 works because current generative AI systems can generate all six prompts from a plain-language mathematical idea.The six-phase schema serves as the template for producing a complete prompt set.
- Future directions: A planned 2026–2027 multi-course pilot will measure conceptual learning and instructor adoption across calculus, differential equations, and linear algebra.The design includes pre/post conceptual measures and comparison with business-as-usual instruction.
- Future directions: A proposed seventh phase, Student Reflection and Assessment, would embed quizzes and reflection prompts directly into deployed visualizations.The quiz would connect to learning objectives specified in Phase 1.
- Future directions: Open questions concern reflection quality, response assessment without grading overhead, and coupling quizzes to a visualization or its broader topic.Early prototype results are encouraging, but these design questions remain unresolved.
10. Conclusion
The six-phase workflow enables generative AI to produce custom, accessible mathematics visualizations without programming expertise. Its practical value depends on verification that catches mathematical, accessibility, and pedagogical problems before classroom use.
- Conclusion: Across four deployed tools and an assessment prototype, the workflow produced mathematically correct and accessible tools after verification.The study used generative AI to build WCAG 2.2-compliant interactive visualizations.
- Conclusion: Verification remains essential because first-pass outputs can contain wrong boundary cases, mistimed screen-reader announcements, or unsuitable defaults.Hand calculations, screen-reader testing, and instructional walkthroughs make tools usable in real classrooms.
- Conclusion: The workflow changes the cost of producing a first draft, allowing instructors to focus more on concept selection, sequencing, and reflection prompts.The paper describes moving from an idea to a working tool in an afternoon, followed by protocol-based verification and classroom trial.
Disclosure of AI use
The paper identifies generative AI as the method used to produce and verify the reported visualizations, while limiting AI in manuscript preparation to language refinement and copyediting.
- AI use: Generative AI generated the six-phase prompt sets and underlying HTML, CSS, and JavaScript for four reported visualization tools.Claude produced two tools and Gemini produced two others.
- AI use: All AI-generated mathematics, code, and accessibility features were reviewed against closed-form results, manual screen-reader and keyboard testing, and learning objectives.The authors describe verification as part of the study process.
- Manuscript preparation: AI was used for manuscript language refinement and copyediting, not for generating text, data, or citations without author review.The authors retain responsibility for originality, accuracy, and integrity.