Tag Archives: javascript

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!

Perplexity and Figuring It Out

For two years in a row, I've hit a sweet spot of engagement, discussion, and really invigorating student interaction with one particular exercise in my web design course. I sit with a web browser console open, and just ask students to go through this cycle:

  • Make a prediction of what's going to appear when I hit enter.
  • See what actually appears.
  • Adjust your model and repeat.

Here was today's series:
Screen Shot 2015-10-08 at 3.56.01 PM

I say almost nothing aside from "here's another one". The amount of laughter, head slapping, and students talking through their attempts to understand is a beautiful thing to witness. The fact that no student blurts out the answer speaks to the respect my students have for each other and for this model.

This is a simple type of activity that I do from time to time, and only from time to time, because I don't want it to lose its novelty. There's no engagement from a real world context. There's no lecture beforehand about what I'm about to do, and how I want them to respond. (Ok, I do ask that they not blurt out the answer or how it works once they know, but that's about it.)

I hope to establish an unspoken agreement with my students that goes something like this:

  • There is a pattern, and I am confident that you'll be able to figure it out.
  • If you can't get it right away, that's fine. You probably aren't the only one.
  • If you are the only one, then you have a lot of people around to nudge you in the right direction.
  • If you're wrong, you'll get another chance to be right in just a minute.
  • Once you know how it works, you might not care anymore. Enjoy the journey.

Getting this agreement across takes time and trust and is really difficult to force. It's remarkably satisfying when it happens. The important part is the consistent commitment to failure: Everyone will fail at least once. Everyone will also likely be wrong at least once after they are right.

Building (Ev)anAcademy Exercises for Reassessments

I've written multiple times previously about WeinbergCloud, the system I created using the Meteor framework that lets students sign up for reassessments. Over the course of the semester, I've been developing some aspects of the system that I'm excited about, and I'll talk about them all eventually. One in particular has held my focus for the past few days, and it's probably the one feature I've been talking about for the longest: building a reassessment engine within the system.

Part of this is out of necessity. The wireless network settings on our school network have changed, so the Python reassessment engine that I've used for reassessments over the last two years no longer works when hosted on my personal laptop. I've managed reasonably well this year using problems from textbooks and handouts, but it became time to automate this using my new knowledge of Javascript and Meteor.

Whatever your feelings about Khan Academy, the reality is that the organization has put a lot of energy and resources into developing a pretty comprehensive web application built around assessment. Not only are these resources available for free for teachers and students to use, but the source code is as well. The code for anyone to be able to run their own local version of exercises has been around for a while at Github here. The Javascript libraries that go with these exercises are also pretty impressive and capable - generating random numbers with constraints, simplifying fractions and expressions, and numerous other helper functions are already written by people that code much better than I do. They also wrote a math-typesetting library called KaTEX that has some performance advantages over some other libraries...or so I hear. I'm sure much of the 'why' here is lost on me.

After two days of tinkering, I've adapted some of their code in my app for the purposes of generating questions for reassessments. Writing questions and defining variables is all done in HTML, just as in their own local application, which means it's possible to add questions without having to load in a database through FTP or some other method. The code rendering the questions onto the webpage I had to write myself, but eventually I determined some ways to make this work for me.

I can put in HTML and Javascript definitions into text areas. Here's an example of a question asking for a simplified fraction for slope:
Screen Shot 2015-10-02 at 9.14.46 PM

A preview appears below to make sure the question appears the way I want it. In the variable definitions are strings of Javascript code that calculate and define the variables using the Khan Academy utility functions. The question text is then rendered using KaTEX. The random values change on each reload of the page, but these values could potentially be fixed for an individual student's quiz.

As I create frames for questions, I get a virtually infinite supply of questions I can use for assessing students on learning. Here are a bunch that I put together for testing the interface:

Screen Shot 2015-10-02 at 9.35.43 PM

The next step is to link each question frame to a course standard and build my database of questions. I'm loving the possibilities for building on this further, and will share as they develop. Stay tuned.

Algebra and Programming - A Peek Ahead

I'm starting a new unit reviewing algebraic skills tomorrow. My students have most certainly moved through evaluating algebraic expressions, solving linear equations, and combining like terms before. Much of tomorrow's class will involve me drifting between students working on this to get an idea of their skill level - certainly not a developmental lesson on these ideas unless I really see the need.

My question is on making these concepts new. The thing that comes to mind most immediately is using this as an opportunity to get students started on concepts of computational thinking. Students have seen the concepts of variables, substitution, and evaluation, but I think (and hope) that the ideas of using a computer to do these things is new enough to whet their appetites to potentially learn more.

What does the computer do well? (Compute).

What must we do to get it to do so? (Communicate to the computer correctly what we want to compute.)

After having my students do some algebraic evaluation on their own, I'm having them watch this short video:
M9 U2D1.1 - Web Browser & Math Hacking

Side Note:

Now that I see I can increase the font size in Chrome for the console, or zoom in using Camtasia, I can make the code much more visible than it is now. Work for the morning.

I can't see an easier way to get students into a programming environment than this. Everyone has a web browser, and Safari and Chrome both give access to a Javascript console without too much work. There are websites like Code Academy that have a similar environment on their front page, but this method barely even requires accessing a web page.

I've had students install Python on their computers before, and it works well enough as long as there aren't any operating system related hiccups. (IDLE does not run so well on OSX 10.5). I just like that this Javascript environment is hiding on student computers without having to do anything.

Other thoughts:

  • We have to tell the computer explicitly that 2x is 2*x. This is a fact that often gets glossed over when students haven't seen it for a while.
  • Javascript doesn't have an easy to access exponent symbol like Python or other languages do. To enter x3, you have to either type x*x*x (reinforcing the idea of the exponent for the win) or Math.pow(x,3) which is too abstract to even consider using with students.
  • Selling programming as a fast and easily accessible calculator isn't a compelling pitch - I completely get that. At this point though, I'm not trying to sell the computer as the way to do things. My students all have computers with them in their classes. If making them unafraid to do something that feels a bit 'under the hood' might lead them to know what else is possible (which is a pitch that is coming really soon), I'm happy with this.

Same Skills, Virtual Car: Constant Velocity Particle Model

I had everything in line to start the constant velocity model unit: stop watches, meter sticks, measuring tape. All I had to do was find the set of working battery operated cars that I had used last year. I found one of them right where I left it. Upon finding another one, I remembered that didn't work last year either, and I hadn't gotten a replacement. The two other cars were LEGO robot cars that I had built specifically for this task, and all I would need would be to build those cars, program them to run their motors forward, and I was ready to go.

Then I remembered that my computer had been swapped for a new model over the summer, so my old LEGO programming applications were gone. Install software nowhere to be found, I went to the next option: buying new ones.

I made my way to a couple stores that sold toys and had sold me one of the cars from last year. They only had remote control ones, and I didn't want to add the variable of taping the controllers to the on position so they would run forward. Having a bunch of remote control cars in class is a recipe for distraction. In a last ditch effort to try to improve the one working car that I had, I ended up snapping the transmission off of the motor. I needed another option.

John Burk's post about using some programming in this lab and ending it in a virtual race had me thinking how to address the hole I had dug myself into. I have learned that the challenge of running the Python IDE on a class of laptops in various states of OSX make it tricky to have students use Visual Python or even the regular Python environment.

I have come to embrace the browser as the easiest portal for having students view and manipulate the results of a program for the purposes of modeling. Using Javascript, the Raphael drawing framework, Camtasia, and a bit of hurried coding, I was able to put together the following materials:
Screen Shot 2013-08-25 at 3.19.57 PM
Car 1 Part 1
Car-2-Model-
Constant Velocity model data generator (HTML)

When it came to actually running the class, I asked students to generate a table of time (in seconds) and position data (in meters) for the car from the video. The goal was to be able to figure out when the car would reach the white line. I found the following:

  • Students were using a number of different measuring tools to make their measurements. Some used rulers in centimeters or inches, others created their own ruler in units of car lengths. The fact that they were measuring a virtual car rather than a real one made no difference in terms of the modeling process of deciding what to measure, and then measuring it.
  • Students asked for the length of the car almost immediately. They realized that the scale was important, possibly as a consequence of some of the work we did with units during the preceding class.
  • By the time it came to start generating position data, we had a realization about the difficulty arising from groups lacking a common origin. Students tended to agree on velocity as was expected, but their inability This was especially the case when groups were transitioning to the data from Car 2.
  • Some students saw the benefit of a linear regression immediately when they worked with the constant velocity model data generator. They saw that they could use the information from their regression in the initial values for position, time, and velocity. I didn't have to say a thing here - they figured it out without requiring a bland introduction to the algebraic model in the beginning.
  • I gave students the freedom to sketch a graph of their work on a whiteboard, on paper, or using Geogebra. Some liked different tools. Our conversation about the details afterwards was the same.

I wish I had working cars for all of the groups, but that's water under the bridge. I've grown to appreciate the flexibility that computer programming has in providing full control over different aspects of a simulation. It would be really easy to generate and assign each group a different virtual car, have them analyze it, and then discuss among themselves who would win in a race. Then I hit play and we watch it happen. This does get away from some of the messiness inherent in real objects that don't drive straight, or slow down as the batteries die, but I don't think this is the end of the world when we are getting started. Ignoring that messiness forever would be a problem, but providing a simple atmosphere for starting exploration of modeling as a philosophy doesn't seem to be a bad way to introduce the concept.