In the Desmos kitchen, we love cooking up interactions that students find interesting and engaging while still having all of the mathematical nutrition they need to tackle challenging problems. As a result, many of our activities may appear difficult and intimidating to recreate. However, you’ll be surprised to know that our animations are simply lines and points on a graph. Most of the sophistication comes from polishing, polishing, and polishing again.
This month, we’re showing you how to recreate Line Zapper and how to redesign it to fit your students’ needs. The most complex part of this interaction is the lightning bolt, but apart from that, it’s not an epic feat to recreate. Learn how to build the graph here.
Let’s show you how to build your very own Line Zapper.
Capturing Points
The CL Most Valuable Player for this interaction is, without a doubt, the capture sink. This allows students to see their previous responses, which helps them formulate their next response. Can you determine the other sinks we used?
| Math Input Using variables removes the need to double up on a lot of the code while also making it easier to read. We used X and Y to help us capture the coordinates more freely. Since we parsed students’ responses (separated an ordered pair into two numbers), we can use the capture sink to plot points. These points come in the form of two lists, which we named “X” and “Y” for simplicity’s sake. |
Graph After we imported the graph, we needed to hook up a few things to drive this component. The zap comes from a student’s current response. We used in.script.X and in.script.Y (yay for variables!) to define the number sinks for x_1 and y_1. The points that remain after the zap are defined by the history of values captured by the input component. We used the numberList sink to import these into the graph: input.history(“X”) and input.history(“Y”). We also defined the timer variable in the graph as input.timeSincePress(). |
Customizing It
We try to make it as easy as possible for you to make this just right for your students. Some important things for you to consider include:
- Setting the equations of the lines you want
- The labels for those lines
- Adjusting your view window
- Hiding the grid or axes
- Changing how many zaps you want to give your students
Be sure to check out the “Correctness” folder to see if anything needs updating there, too.
Other Sinks
Were you able to determine all of the sinks in the math input component? We used a few notable ones: clearOnReset, resetOnChange, errorMessage, warning, submitLabel, readOnly, hidden, and, of course, capture.
Reset Button
We used a button to act as a reset for this interaction. This pops up when students have either used up all of their zaps or they correctly completed the screen. We’ve got the graph doing a lot of the work here to make this behave just the way we want it to. Check out the tutorial if you’d like to know more about how this works.