I began developing online interactives in the fall of 2017 to teach myself javascript and supplement the classes I was teaching at SUNY Oswego. I've used these interactives:
As in-class activities with accompanying worksheets
During lectures
As supplemental materials
To produce videos
And to experiment with the medium as a teaching tool
I've also produced interactives for my colleagues to use for their classes.
Higlights
Velocity: For a while I was very interested in making interactive worksheets, with answer boxes users could type answers into which then get equivalence-checked with math.js or KAS.js. This worksheet was made to walk students through the process of working out the formula for the derivative on their own. It also contains an interactive inside of it that lets users 'drive a car', generating their own position-time and velocity-time graphs so they can see how these are related. I used this inner interactive in my Calc 1 lectures, but haven't yet experimented with these worksheets as an in-class activities.
Acceleration and Riemann Sums: Another interactive worksheet, this time focused on walking students through the intuition behind Riemann sums and calculating them on their own. I really believe that students will remember concepts better if they figure them out on their own, and that most Calc 1 students can be guided through a series of steps to figure out many of the key ideas of Calc 1 on their own, but this can take more time and teacher guidance than is available.
Reasoning About Approximation: An experiment with the interactive explainer, but without the answer boxes. An understanding of real numbers and how to work with approximations is really helpful for the Calc 1 student, but this topic is often skipped over.
Symbolic Differentiation: One of the mathematical concepts I most want to communicate is the step-by-step formal calculation (see below). This interactive was one of my earlier attempts at such, and I hope can be really helpful for students who have trouble with multi-step derivative problems.
Transforming Functions: One of my earliest interactives explicitly designed to be used as an in-class activity. This topic really demands an interactive approach: letting students transform a function and see how the graph changes. I also experimented with softening the feedback of the guessing game: instead of telling students they got the problem right or wrong, I just showed the target graph and the student's guess on the same plane, so they can judge for themselves if they got the problem right.
The Quadratic Formula: Another interactive worksheet with automatically generated examples and practice problems. Really pushed the limits of what I could do with math.js, kas.js, and katex.js, and challenged me to identify and handle all cases of simplifying answers from the quadratic formula.
Functions, Graphs, and Tables: A nice practice problem generator for using formulas for functions, reading graphs and tables, and function compositions that evaluate to numbers.
Intersections Between Lines and Conics: Practice problem generator for linear and quadratic equation review for College Algebra. Here I pushed myself to create an interconnected system of step-by-step walkthroughs that passed to each other when one type of problem reduced to another type of problem.
Linear Transformations: Visualizer for 2x2 matrix transformations. I added to this interactive as I taught linear algebra, adding in new visualization tools for new topics as they came up.
FRACTRAN: A programming puzzle game meant to teach everything one needs to know to program in FRACTRAN, an esoteric programming language by John Conway. Yet again, by walking students through just the right problems in just the right order, it's often possible to get them to figure out big ideas on their own, in which case these ideas will stick with them longer.
Ehrenfeucht-Fraïssé Game on Finite Graphs: My introduction to Model Theory was through EF-Games: they're excellently accessible and yet also a powerful tool for reasoning about the expressivity of first-order logic.
Highlights of the Interactive Medium
Encouraged Heuristic Development
One of the best uses of the interactive medium is providing the user with a task, giving them plenty of feedback on how they're progressing, and repeating with random variations on that task. A persistent user should hopefully develop heuristics or an algorithm for tackling those sorts of problems. In specific circumstances, this algorithm can be exactly the algorithm that would normally be taught in class, but if the user develops it on their own they are more likely to retain that skill and form connections with it.
Examples:
Completing The Square: Users have to come up with the completing-the-square form of a quadratic, and hopefully develop an algorithm in the process.
Function Transforms: This interactive about function transformations includes a guessing game at the bottom that requires users to really understand what to pay attention to in graph recognition.
Ehrenfeucht-Fraïssé Game on Finite Graphs: Discovering winning strategies in this game is equivalent to exploring the expressivity of the first order logic of graphs. These sorts of games originally got me into Model Theory (a branch of logic).
The best way to learn how to program is to write programs. Inspired by programming games like Zachtronics' TIS-100 and the Lean proof assistant tutorial "the Natural Number Game", I've developed some interactives that provide users with a series of programming problems to guide them through the process of learning a programming language
Examples:
Polynomials: Enterprise Edition Diophantine equations are Turing complete. This was my first attempt at a programming-puzzle style game, meant to guide users through some of the basic constructions involved in the proof. Unfortunately, the full proof is far too complicated to make a good programming puzzle game. This was a game jam entry, which was described by another entrant as "... the most horrifying abomination to ever grace the earth. A++ excellent idea."
FRACTRAN is another esoteric Turing complete programming language, but one that is much easier to prove is Turing complete. This interactive guides users through all they need to understand the proof that FRACTRAN is Turing complete.
Visual Exploration
Throughout mathematics, being able to visualize the same thing in different ways is a vital skill. Digital interactives can allow users to modify an input and see how visually that changes the output.
Examples:
Function Transforms: The main part of this interactive allows users to see what changes to a graph formula does.
Linear Transformations: I developed this interactive to use in my linear algebra lectures, showing how various matrices transform space.
Parse Trees: Uses my own AST to html routine to allow the user to explore ASTs for algebra.
Sample Means: Visualize taking lots of samples from a population
Velocity: A "virtual worksheet" with a widget in the middle allowing one to take a virtual car trip and visualize the resulting position-time and velocity-time graphs. Ultimately the worksheet is meant to lead users to come up with the derivative formula on their own.
Shuffling Cards: Originally meant to explore chaos, mostly just turned into a fun visualizer exercise.
Supplementing Lectures
One of the major uses of my interactives that I hadn't anticipated was as visuals during my lectures.
Examples:
Plugging-in-really-close-values Simulator: I start my Calc 1 class with this demonstration of approximations to pi-squared to strengthen my students' intuition for real numbers, and foreshadow limits.
Velocity: When introducing derivatives, I use the interactive on this page to show what features of a position-time graph correspond to physically.
Linear Transformations: I developed this interactive alongside my linear algebra lectures, adding new features every time I wanted to visualize something new in my lecture.
Graphics for Worksheets
Another surprising application was using the interactives I had created to generate diagrams for worksheets and quizzes.
Examples:
Piecewise Functions: Particularly useful for creating graphs for left-hand and right-hand limits in Calc 1.
The Quadratic Formula: As part of this interactive, I built a function that creates sensible walkthroughs for simplifying the results of the quadratic formula. This has made it very easy to publish answers to these sorts of questions.
Reading Graphs Creates good problems for finding domains and ranges given a graph.
Formalist Propaganda
The book Gödel, Escher, Bach was a major early influence on my mathematical development. It introduced me to formal symbolic systems and the idea of encoding mathematics in formal symbolic systems, ultimately leading to my formalist mathematical philosophy.
My hope is to spread this philosophy by creating a "Computation Assistant". Similar to proof assistants, this would allow the user to work through a computation step by step, with each step being chosen by the user but applied by the computer. Eliminating the extra cognitive load of correctly copying the previous line of a computation and applying the computation step correctly should allow users to focus on the question of what steps they should apply to reach their goal. This interactive could even exhibit encouraged heuristic development for multi-step algebraic processes (such as how to add fractions).
My ultimate goal is to produce something which is accessible to College Algebra students but useful for professional mathematicians. I recall having to preform page-long computations in physics classes, with a small error in one line leading to hours of minus-sign following and error hunting, and software that only allows valid computational steps could be very helpful for this.
Electronic Polynomial Educational Experience: This demo is suitable for students at an abstract algebra level, exploring the joys of having to manually apply associativity. Students at the College Algebra level freely apply n-ary associativity and commutativity rules, so ideally I would want an interactive that makes applying those rules seamless.
Associativity and Commutativity: You can also play around with this newer system here, where it's all associativity and commutativity.
Other Experiments
Reasoning about Approximation: A guided exploration of the relationship between decimal approximations and interval arithmetic.
Trig Sum Formulas: An "interactive without words": Prove the trig sum formula on a diagram with adjustable angles.
What is Math?: When we present the solution to a math problem, we usually only present one solution path. In this interactive I try visualizing several solution paths at once.
Development
All my pages are written by hand in notepad, with html, css, and javascript all contained in one single file. I have made use of a few libraries, but my hope is to eventually replace them with my own. I have already developed my own graph drawing library (tgr.js) and have implemented some basic symbolic algebra tools, such as parsing, displaying, and manipulating formulas (tkas.js), and am currently working on a 3D graphics library.
Sage Math Cell (Modified BSD license). Information about calling SageMathCell servers directly can be found here (replace http:// with https:// to avoid a CORS error).