Exploring Functions (and Non-Functions) Interactively

Heeding Dan’s encouragement to step things up in his NCTM talk, I revisited an introduction to functions activity that I put together three years ago. The idea is to get students to make observations about inputs and outputs and use the ‘notice and wonder’ parlance from the Math Forum to prompt conversations about these ideas.

I rewrote the activity with some deliberate changes and webified it to make it easy to access and share – you can find it here:
http://emwdx.github.io/functions-exploration/index.html

Screen Shot 2016-04-29 at 9.55.09 AM

The activity has a few elements that I want to highlight with the hope that you might consider (a) trying the activity with your students or (b) downloading the code for the activity, tweaking it, and then re-sharing it with your enhancements.

Students go through the modeling cycle multiple times.

The activity begs students to take a playful approach. Change the input value and watch the output. Predict what’s going to happen and see if your mental model is correct. Then do the next one, and the next.

Arithmetic isn’t necessarily a prerequisite.

Some students were actually more puzzled by the functions that took text inputs. They experimented nevertheless to figure out what was happening, and some noticed that the pattern worked for numbers too.

Controversy is built in.

Students working on Functions 5 and 6 saw nothing weird happening when they worked alone. When they then went to share their answers with classmates, the latter function started some really interesting interactions between students trying to figure out who was wrong.

Students of different levels all succeeded and all struggled at some point.

One student zipped through the arithmetic exercises and then got stuck figuring out Function 3 or 7. Some of the weaker students jumped around and got Functions 1 and 4 and 8, which is enough to get in the game of finding patterns and drawing conclusions. A higher level student experimented with Function 7 to find that there was a well defined range for the outputs – random, but with limitations.

The need for definitions came out of the activity, not the other way around.

Students felt the need to clearly define the behavior of Functions 6 and 7 as being different than the others in a fundamental way. Definitions for relations and functions weren’t huge cognitive jumps for students since there was a recently established context. It’s also important to notice that the definition for relations that aren’t functions has to be more than just the lack of a pattern. Function 6 helps with this.

Many of the CCSS standards for mathematical practice are embedded within.

…as are some of the high school standards for functions.

If you try this with students, let me know how it goes.


Technical Details:

If you want to try this yourself, you can download the code from Github here:
https://github.com/emwdx/functions-exploration/tree/gh-pages

I did this also as an attempt to whip together something using the React JS library which I’ve been learning recently. It makes for a really nice interface for building this type of interactivity into a webpage. There will be more, so stay tuned.

The React components for the eight functions are in lines 86-102 of the index.html file. The function definitions used by each component are defined toward the bottom of the code in that file. You could change these around using Javascript to make these functions fit with your vision of this activity for students. The file is self contained, so you share just the HTML file you change with students, the page will function correctly.

Happy coding!

5 thoughts on “Exploring Functions (and Non-Functions) Interactively

    1. This is great Xavier – I’ll have to dig into the details on how to reproduce the Chrome bug. At the moment it seems to be working fine on my end, unless I’m not actually understanding the issues you found.

      I also added an MIT license – mix it up as much as you want and share away.

      1. Never mind – I figured out it was a window sizing issue. I haven’t played with the helper classes on the input for the medium size browser window to fix this.

Leave a Reply

Your email address will not be published. Required fields are marked *