Lucas Longo

Jasmine Park


Table of Contents


The interactive graph learner enables students to understand how graphs are drawn as a result of the relationship between the x and y value. There are four stages of learning a linear equations: y=x, y=x+b, and y=mx+b,  y=a sin  (bx + c) . In each stage, students are prompted to draw the line of the given equation. In the latest stages, students are able to manipulate the m,b,a,b,c values of the linear and sine equations to visualize the changes in those values in the graphs.

Learning Objectives

  1. Visualize the equation y=m • x + b, y = a • sin( b • x + c ) + d with changing parameters in regards to understanding the active relationship between x and y.
  2. Learn how the arbitrary variables m,b,a,b,c change a certain graph when the values change

Target Audience

8th grade and high school students (currently the common core introduces the most basic form of the equation y=mx+b in the 8th grade and y=sinx in high school)

Target Persona:



We have worked off of two theoretical foundations - embodied learning in mathematics and restructuration -  to inform the idea of our product. Thereafter we looked at literature to make design decision that would help students more intuitively engage with our product.

Embodied Learning

Studies in the field of embodied learning in mathematics have converged on the fact that gestural interface and embodied cognition help students retain knowledge and enhance sense-making. Mathematics is a field of study wherein topics such as quantity, structure, space, and change are taught through a theoretical basis. Thus, researchers have looked at methods to make these theoretical concepts more pertinent and long lasting for students.

Embodied cognition is a large umbrella for understanding learning by contextualizing the material. Núñez et al. has seen in their research that “embodiment provides a deep understanding of what human ideas are, and how they are organized in vast (mostly unconscious) conceptual systems grounded in physical, lived reality.”[1] Bodily based experience enhances human sense-making and grounds concepts that are otherwise too conceptual or abstract for students to understand.

Stemming from the concept of embodied cognition, we dove deeper into embodied cognition in the form of performing gestures. Ayelet Segal focused on gestural conceptual mapping wherein students use “congruent gestures to help construct better mental representations and mental operations to solve problems”.[2] His research concluded that students performed better when they manipulated object, whether it be for estimation or discrete calculation, through direct touch rather than using the mouse interface. Research by Cook et al. supports the notion of gesture being a critical component in learning.[3] Children who were required to gesture while learning a new concept retained the knowledge they had gained during instruction significantly more than those who did not. Both research point to the power of gesturing and tactile touch as an effective way of learning and performing better while solving mathematical questions. We incorporated these conceptual ideas from embodied learning and cognition to inform our decision of making a product that would ground the idea of a formula-based graphs through sense of touch. We wanted to help students understand that the lines portrayed on a function-based graph is a representation that is moving, growing, oscillating, approaching values, and reaching limits - that it is a constant relationship between the x and y values rather than a instant product.


Restructuration, as defined by Wilensky, is “change from one structuration of a domain to another resulting from such a change in representational infrastructure.”[4] Our product is not a complete restructuration in the sense that we change the representation of a formula on a grid - we still wanted to keep the graph lines. However, we wanted to change the structuration of the concept of graph lines by changing how the graph was represented. The x value and y value are in constant relationship with one another in a graph. It can be said that therefore, the graph is in motion - it is a representation of continuity. However, the current understanding of graphs is very much isolated to an instantaneously plotted line by given x and y values. This is true in textbooks and graphing calculators. In essence, the graph appears rather than reveals. We believed that we could augment the power (power and cognitive properties) of the old by helping students understand the continuity of the graph through tactile hand motion, and thus making the concept more engaging (affective properties).

We saw through our UI testing during class that the restructuration was noticed and happening in the user. Our user commented on how she used graphs in many of her classes but never had drawn a graph in such a way that made her realize that graphs were a simple change in the x and y values that drew a continuous line. Through the process of playing with the product, the user restructured the knowledge of a graph to understand the relationship of the representation (line) and the conceptual background (x and y values). We predict that students will learn what and how a graph is created in a different way through the process of manipulating the values of x and y through the slider.

A quote by Núñez et al. summarizes the concept that we wanted to push forward:

“Formally speaking, the function does not move, but cognitively speaking, under this metaphor, it does – and that is what matters in terms of understanding.”[5]

Literature Review

Representations: Graph x Table x Equation Design Elements

In order to make informed decisions on the design of the product, we looked into readings that looked at the how people interact with representations on an interface. The two key readings we looked at were “Metarepresentation: Native Competence and Targets for Instruction” by diSessa and “Why does signaling enhance multimedia learning? Evidence from eye movements” by Ozcelik et al.

DiSessa’s research examined what a good representation consisted of. An interesting finding was that criteria for a “good representation” for a 6th grader and a high schooler were fairly parallel.[6] 

 Figure 1: 6th grade

Figure 2: High School

Principally, a good representation had strong elements of conventionality to aid communication to the user - realism, accuracy, and alignment with what was expected. Apart from the criteria listed above, some key elements that engaged users were :

We tried to best incorporate these elements into our design to ensure that the users felt comfortable and competent with the product.

In addition to diSessa’s research, we took a look at eye tracking in multimedia learning to learn about where and when users paid attention on an interface. Ozcelik et al.’s research emphasized a concept called signaling: “Providing cues to students in the most effective and efficient way to process the instructional materials.”[7] Signaling guides the user to connect one element to another and engage in more meaningful learning with fewer processing power.

We used instructional pages to guide attention of the learning so that he or she would not be lost. There are three stages of instructional signaling that leads the user through several steps: 1) demo of the line drawing with sliders moving, 2) 1 degree of freedom with x-value, 3) 1 degree of freedom with y-value, 4) 2 degrees of freedom with autonomy over both variable sliders, 5) sliders to change parameters of straight line, and 6) sliders to change parameters of a sin wave.

In addition, we used other forms of signaling such as typographical changes and color coding[8]. We incorporated color coding of all possible elements to show how one aspect of a representation works in unison with another. This literature informed us on how to best guide users and help users make connections in the most intuitive manner.

Interactive Affordances

We have several levels of interactive affordances in our product. It is important to point out the variables that can be manipulated by the user:

The user therefore has control over these variables to interact with the product. Our key interactive affordance is the ability to have 1 to 2 degrees of freedom when it comes to drawing the line. This provides an opportunity for collaboration as well, which we will discuss shortly.

When working individually, the user can choose to control both x and y sliders, or concentrate on one of the parameters. This was made possible by implementing both a manual-mode, where the user can control both x and y controllers, and a auto-mode, where one of the parameters will move on its own at 3 different speeds. By controlling both the x and y value, the user will be able to learn the how the changes in x directly affect y and vice versa. By embodying the changes of the values through one’s actions, the user will learn how the graph he or she is creating is a result of subtle correlated movements between the x and y values.  By choosing the auto-mode for either x or y value, the user will be able to focus on the the changes of a certain parameter as the other parameter moves at a constant rate. For example, if the user holds the x slide on auto while drawing a sine graph, he or she will realize the graph is created by a simple increase and decrease of the y values at a certain rate. By focusing on the y value, the user can learn that the sine graph is a drawing created essentially by a change in the y values.

When working in pairs, one partner can control one parameter while the other controls another. This affordance allows for two people to collaborate closely to move at a certain rate to create a graph line. When y=x the partners will realize they have to move at the same rate. However, when the slope changes, for example, the partners will learn that while the x-value stays at a certain speed, the y-value will have to move at twice the speed. The product will promote the understanding of a graph as a continuous motion of x and y at different speeds.


We incorporated several layers or stages to help the user move from the most basic concept of a linear graph to a more difficult concept of a sine graph.

The linear graph is divided into three levels, each adding an additional variable to the equation:

  1. Y=X
  2. Y=X+B
  3. Y=MX+B

The sine graphs have 4 different parameters that the user can play with :

  1. Y=A SIN (BX+C) + D

There are steps in revealing certain elements one by one so that the users are not overwhelmed. When the user has 2 degrees of freedom with autonomy over both variable sliders, the product reveals the numerical values in a table. This is to not overwhelm the beginning user when he or she is simply learning to grappling with the program. When the user is comfortable to move on to the next stage of y=mx+b, we reveal the formulas on the monitor. At this stage, we believe it is important for the users to be able to map what changes are made when the values of a certain variable in a traditional formula are altered.

Process Log:

Initial drawings:




Screen Shot 2016-03-09 at 9.14.38 AM.png


Screen Shot 2016-03-09 at 9.15.33 AM.png


Screen Shot 2016-03-09 at 9.18.30 AM.png

Final Product

Github code:



[1] Núñez, Rafael E., Laurie D. Edwards, and João Filipe Matos. "Embodied cognition as grounding for situatedness and context in mathematics education." Educational studies in mathematics 39.1-3 (1999): 45-65.

[2] Segal, Ayelet. "Do Gestural Interfaces Promote Thinking? Embodied Interaction: Congruent Gestures and Touch Promote Performance in Math." Diss. Columbia U, 2011. Do Gestural Interfaces Promote Thinking? Embodied Interaction: Congruent Gestures and Touch Promote Performance in Math. Web. 7 Mar. 2016.

[3] Cook, Susan Wagner, Zachary Mitchell, and Susan Goldin-Meadow. "Gesturing Makes Learning Last." Cognition 106.2 (2008): 1047-058. Web.        

[4] Wilensky, Uri. Restructurations: Reformulating Knowledge Disciplines through New Representational Forms. N.p.: Northwestern University, 2010. PDF.

[5] Núñez, Rafael E., Laurie D. Edwards, and João Filipe Matos. "Embodied cognition as grounding for situatedness and context in mathematics education." Educational studies in mathematics 39.1-3 (1999): 45-65.

[6] diSessa, Andrea A. "Metarepresentation: Native competence and targets for instruction." Cognition and instruction 22.3 (2004): 293-331.

[7] Ozcelik, Erol, Ismahan Arslan-Ari, and Kursat Cagiltay. "Why does signaling enhance multimedia learning? Evidence from eye movements." Computers in human behavior 26.1 (2010): 110-117.

[8] Ozcelik, Erol, et al. "An eye-tracking study of how color coding affects multimedia learning." Computers & Education 53.2 (2009): 445-453.